JS+PHP瀑布流效果（二）

<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瀑布流效果（二）

最新文章

热门文章