waterfall瀑布流布局+动态渲染的实现

 var space = (wParent - 5 * width) / (col - 1); // wParent 父盒子的宽度，width是子盒子的宽度，col是列数

 
 
 
 
hello
 
hello
正在加载...

 /*自调用  形成一个闭包 */ (function($){ /*如果不加jQuery里面使用的$是全局变量，加了之后使用的就是成员变量*/ })(jQuery);

 /*js/jquery-waterfall.js*/ (function($){ $.fn.waterfall = function(){ /*this指向的是当前调用这个方法的元素集（元素集是jquery获取元素是一个伪数组）*/ console.log(this); } })(jQuery);

 (function($){ $.fn.waterfall = function(){ // this指向的是当前调用这个方法的元素集 // 当前的瀑布流父容器 var items = $(this); //父容器的宽度 var wParent = items.width(); //当前的瀑布流子容器 var child = items.children(); //获取子容器的宽度 var width = child.width(); //假设排多少列 var col = 5; //计算间距(父元素的宽度减所有盒子的宽度/4) var space = (wParent - col * width) / (col - 1); //记录每列高度的数组 var colHeightArr = []; //遍历每一个子元素 $.each(child,function(i,item){ var $item = $(item); var height = $item.height(); //设置定位 //第一排的元素都是靠顶部的，所以索引从0开始，小于5的时候都是靠顶部的 if(i 

 (function($){ $.fn.waterfall = function(){ // this指向的是当前调用这个方法的元素集 // 当前的瀑布流父容器 var items = $(this); //父容器的宽度 var wParent = items.width(); //当前的瀑布流子容器 var child = items.children(); //获取子容器的宽度 var width = child.width(); //假设排多少列 var col = 5; //计算间距 var space = (wParent - col * width) / (col - 1); //记录每列高度的数组 var colHeightArr = []; //遍历每一个子元素 $.each(child,function(i,item){ var $item = $(item); var height = $item.height(); //定位 //第一排的元素都是靠顶部的 //索引从0开始，小于5的时候都是靠顶部的 if(i  v){ index = k; minHeight = v; } }); //定位 $item.css({ top:minHeight + space, left:index * (width + space) }) //当前数组中最小的高度进行新的高度的更新 colHeightArr[index] = minHeight + space + height; } //console.log(colHeightArr); }); //设置父容器的高度 var maxHeight = colHeightArr[0]; $.each(colHeightArr,function(k,v){ if(maxHeight 

 $(".items").waterfall();

 /*页面上所有的资源都加载完成后进行布局，否则获取不到图片的尺寸撑不开盒子的高度*/ window.onload = function(){ $(".items").waterfall(); } //为什么不用jquery的，因为这个是在dom元素下载完毕之后进行加载这个方法，需要等所有的资源加载完之后进行排列 /* $(function(){ //console.log('dom loaded'); }); */

 
 
 
正在加载中...

 $(function(){ //实现动态的瀑布流渲染 //渲染 var render = function(){ // 加载数据  渲染页面  瀑布流布局 $.ajax({ type:'get', url:'data.php', data:{ //第一页 page:1, //每页10条 pageSize:10 }, dataType:'json', success:function(data){ console.log(data); } }); } render(); }); 

 $(function(){ //获取需要操作的dom var $items = $(".items"); var $btn = $(".btn"); //渲染 var render = function(){ // 加载数据  渲染页面  瀑布流布局 $.ajax({ type:'get', url:'data.php', data:{ //取下一页的页码，没有的话就默认是1 page:$btn.data("page")||1, //每页10条 pageSize:10 }, beforeSend:function(){ $btn.addClass("loading").html('正在加载中...'); }, dataType:'json', success:function(data){ console.log(data); //准备模板 //因为是追加所以不能用html，要用append //直接用data的原因是因为data本来就是一个对象，里面有很多的属性，而不是一个数组，数组的话不能这样，因为数据只有length一个属性 $items.append(template('template',data)); //瀑布流布局 $items.waterfall(); if(data.items.length){ //更改按钮 //data是一个自定义属性,把数据中传输出来的page保存在自定义属性当中， $btn.data("page",data.page).removeClass('loading').html('加载更多'); }else{ //没有更多数据 //判断什么时候就没有数据了，打开最后的一个对象，里面items的数组的长度为零 $btn.addClass("loading").html("没有更多数据了"); } } }); } //按钮加载 $btn.on('click',function(){ //避免发送多个ajax请求，就进行判断，如果是loading状态，就退出， if($btn.hasClass("loading")){ return false; } render(); }) render(); });

 $(function(){ //实现动态的瀑布流渲染 //获取需要操作的dom var $items = $(".items"); var $btn = $(".btn"); //渲染 var render = function(){ // 加载数据  渲染页面  瀑布流布局 $.ajax({ type:'get', url:'data.php', data:{ page:$btn.data("page")||1, pageSize:10 }, beforeSend:function(){ $btn.addClass("loading").html('正在加载中...'); }, dataType:'json', success:function(data){ console.log(data); $items.append(template('template',data)); //瀑布流布局 $items.waterfall(); //判断数组中有没有数据 if(data.items.length){ $btn.data("page",data.page).removeClass("loading").html('加载更多'); }else{ $btn.addClass("loading").html("没有更多数据了"); } } }); } //滚动加载 $(window).on('scroll',function(){ //文档距离底部的距离小于200px 去加载 //并且加载完成才能继续加载 //items的高度 var itemsHeight = $items.height(); //items距离顶部的偏移量 var itemsTop = $items.offset().top; //整个页面距离顶部的卷曲出去的距离 var scrollTop = $(document).scrollTop(); // 浏览器的高度 var winHeight = $(window).height(); //  浏览器底部距离items底部的距离 var bottom = itemsHeight + itemsTop - scrollTop -winHeight; //  判断按钮是不是loading状态 var loading = $btn.hasClass("loading"); //如果按钮小于200 且 不是loading状态就开始加载 if(bottom <200 && !loading){ render(); } }) });< pre>

 // 模板引擎中写  /* 同样在ajax的success中 $items.append( template('template',{ data:data, width:width }) ); 这样width变量就可以使用了。 */