• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

JS+PHP瀑布流效果(二)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

<!-- 加载商品 -->
<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>


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
php配置Gmail发送邮件PHPMailer发布时间:2022-07-10
下一篇:
Centos下Yum安装PHP5.5,5.6,7.0 发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap