IT基地
用户登陆
我要注册
用户名或密码错误
登 陆
注 册
IT基地 >李蓝猫的博客 >我要发文
JQ瀑布流布局与下拉加载
作者:李蓝猫   发布时间:2017-04-11 16:10:27   点击数:10964

对于瀑布流下拉加载 可采用 masonry+infinitescroll 插件方法 或者 BlocksIt 等多种插件方法

但因项目需要,瀑布流和下拉配合,所以采用了上手时间较短的 masonry+jQuery库方法,细节会在注释中注明

效果图:

1459617418556280.jpg


步骤一:瀑布流采取jquery插件 masonry 用法 (自适应屏幕宽度)

 //由$(function(){})自动加载调用即可,无须事件触发
   var $container = $('.sucais');
    $container.imagesLoaded(function() {
        $container.masonry({
                itemSelector: '.sucai',
                gutter: 20,                     //定义了内容块之间的距离
                // isAnimated: true,            //打开动画选项
               // columnWidth: 5                //每两列之间的间隙为5像素
            });
      });

配套HTMLdemo如下  特注明外层div 和内层div 不要设置固定死高度 若设置 无法完成瀑布流样式

<div class="sucais">    
    <div class="sucai">1111111111</div> 
    <div class="sucai">2222222222</div>    
    <div class="sucai">3333333333</div> 
    <div class="sucai">4444444444</div> 
 </div>

附 masonry插件 内部script引用即可:jquery.masonry.min.rar


步骤二:下拉加载采取主流的判断下拉条距离底部位置来做判断

$(document).ready(function(){  
            var range = 0;//距下边界长度/单位px   
            var totalheight = 0;
            var main = $("#mscreen"); //主体元素
            $(window).scroll(function(){  
                var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)    
                //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
                //console.log("页面的文档高度 :"+$(document).height());  
                //console.log('浏览器的高度:'+$(window).height());        
                totalheight = parseFloat($(window).height()) + parseFloat(srollPos); 
                if(($(document).height()-range) <= totalheight) {
 
                    $.get("xxx.php",{            //ajax异步调用区
                        ajaxType:'kNewsList',
                        offsize:offsize,
                        },
                        function(data){
                            //alert(data);                
                            if(data==0){
                                $('#loading').html("已为您加载全部");
                            }else{
                                $('.sucai:last').after(data);        
                                 $('.sucais').masonry('reload');    //参数追加完 重新加载masonry瀑布流方法,实现全局效果
                            }
                            });
                }
            });  
        });


本站部分数据来自软件的自动采集,仅用于学习交流,决不用于商用,如有侵犯您的合法权益,请联系我们删除。
发表技术文档,,记录个人生活,聚集意见领袖,众多IT精英,以我们的技术让开发更便捷。
IT基地版权所有,伪版必究 京ICP备17064610号-1
微信QQ空间QQ好友新浪微博FacebookTwitter