<!-- 加载商品 -->
<script>
    //用户拖动滚动条,达到底部时ajax加载一次数据
    var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on,来判断执行一次ajax请求
    load=$("#loading").data("on");
    arr=new Array();
    $(window).scroll(function(){
        if(load){
            return;
        }
        var scrollTop=$(document).scrollTop();
        var height=$(document).height()-$(window).height()-Math.random();
        if(scrollTop > height){
            $('.loading').css('display','block');
            //加载更多数据
            $("#loading").data("on", false);
            loading.data("on", true).fadeIn();         //在这里将on设为true来阻止继续的ajax请求
            //开始获取数据信息
            var num = $('#main li').length;
            var res=$.inArray(num,arr)
            if(res==-1){
                arr.push(num)
                var newArr=unique(arr)
                // console.log(arr)
                var lastNum=newArr.pop()
                jsonajax(lastNum);
            }
            
        }else{
            loading.data("on", false).fadeIn();
        }
    })
    function unique(arr) {
        var result = [], hash = {};
        for (var i = 0, elem; (elem = arr[i]) != null; i++) {
            if (!hash[elem]) {
                result.push(elem);
                hash[elem] = true;
            }
        }
        return result;
    }
    function jsonajax(num){
        // //开始获取数据信息
        var data={num:num,where:'{$where}'};
        $.ajax({
            url:"{:U('Productlist/more')}",
            type:'POST',
            data:data,
            dataType:'json',
            success:function(json){
                l=json.length;
                // 由于是json数据,这里判定是否有数据信息
                if(typeof json == 'object' && l>0){
                    var neirou,row,iheight,temp_h,html;//定义变量
                    var slist='<?php echo $slist["price"];?>';
                    for(var i=0;i<l;i++){
                        //将获得的json数据遍历
                       info = json[i];
                       // console.log(slist);
                       if(slist==''){
                               var price=info.purchase_price/(1-(info.rate_profit/100));
                       }else{
                               var slistfloat = parseFloat(slist);
                               var price=info.purchase_price/(1-(info.rate_profit/100));
                               price=slistfloat*price;
                       }
                       price=price.toFixed(2)

html = '<li class="iw-g-fore"><a href=""><div class="iw-g-fore-img"><a href="__APP__/Home/Product/detail/id/'+info.id+'"><img src="'+info.filepath+'_200x200.png" alt="产品图"  /></a></div><div class="iw-g-fore-intro"><div><a href="__APP__/Home/Product/detail/id/{$product.id}"><h5>'+info.name+'</h5></a></div><div class="iw-good-price"><h6>'+price+'</h6><p>起订<i>'+info.moq+'</i></p></div></div></a></li>';

item = $(html).hide();//  这句话可以不要,因为这句话是将需要附加的html隐藏掉,以便可以附加下面的瀑布效果,如果不要这句话,下面的item修改成html即可
                        $("#main").append(html);//附加
                        item.fadeIn(1000);//产生渐现效果
                    }
                }else{
                    $('.loading').html('没有更多了~~~');
                }
            }
        });
    }
</script>

JS+PHP瀑布流效果(二)的更多相关文章

  1. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  2. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  3. js 图片瀑布流效果实现

    /** * Created by wwtliu on 14/9/5. */$(document).ready(function(){ $(window).on("load",fun ...

  4. JS+PHP瀑布流效果

    miai.php,代码如下: $link = mysql_connect("localhost","root",""); //连接数据库 $ ...

  5. 原生js实现瀑布流效果

    参考此篇:https://segmentfault.com/a/1190000012621936 以下为个人测试中: css: .masonry{ width:100%; } .item{ posit ...

  6. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  7. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

  8. JS 瀑布流效果

    JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  9. js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

随机推荐

  1. IIS各种问题汇总

    1.不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的(overrideModeDefault="Deny"),或者是通过包含 overrid ...

  2. spring揭秘读书笔记----spring的ioc容器之BeanFactory

    spring的ioc容器是一种特殊的Ioc Service Provider(ioc服务提供者),如果把普通的ioc容器认为是工厂模式(其实很相似),那spring的ioc容器只是让这个工厂的功能更强 ...

  3. list操作总结. dict操作及文件操作

    1: 列表的操作 help(list) # 列表的帮助,列出所有列表的用法 type(name) # type判断数据类型是列表还是字典或者元组 isinstance("字符", ...

  4. cadence原理图和PCB互联显示成功但是不能高亮和database

    问题现象:cadence原理图和PCB互联显示成功但是不能高亮我的问题 解决:尝试修复数据库试试,Tools->Database check 提醒:有一个封装非法命名,在原理图中修改后 再次保存 ...

  5. 汇编里的IMPORT和EXPORT

    IMPORT ,定义表示这是一个外部变量的标号,不是在本程序定义的EXPORT ,表示本程序里面用到的变量提供给其他模块调用的.以上两个在汇编和C语言混合编程的时候用到刚看到一篇不错的BLOG,解说C ...

  6. MTU的概念,什么是路径MTU? MTU发现机制,TraceRoute(了解)

    1.MTU的概念      MTU即Maximum Transmission Unit 最大传输单元.它是指一种通信协议的某一层上面所能通过的最大数据包大小(以字节为单位). 2.路径MTU     ...

  7. web info

    http://blog.csdn.net/qq_24473141/article/details/51363662 http://blog.sina.com.cn/s/blog_8e392fc2010 ...

  8. Django学习之网站图标

    首先,你要有一个.ico的文件,可以从easy icon直接搜索一个图标. 1.先导入RedirectView,是一个通用类视图. from django.views.generic.base imp ...

  9. java-MapDemo

    Map数据结构的使用 package com.example; import java.util.HashMap; import java.util.Map; /** * MapDemo.java D ...

  10. c++ 使用boost regex库 总结

    用java的时候觉得挺折腾,回头来弄c++才知道什么叫折腾...汗... 首先参考我写的这篇文章:http://www.cnblogs.com/qrlozte/p/4100892.html 我从sou ...