对于瀑布流下拉加载 可采用 masonry+infinitescroll 插件方法 或者 BlocksIt 等多种插件方法
但因项目需要,瀑布流和下拉配合,所以采用了上手时间较短的 masonry+jQuery库方法,细节会在注释中注明
效果图:
步骤一:瀑布流采取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瀑布流方法,实现全局效果 } }); } }); });