waterfall瀑布流布局+动态渲染的实现3种方式实现瀑布流布局小结详解纯css实现瀑布流（multi-column多列及flex布局）css3 column实现卡片瀑布流布局的示例代码用CSS3实现瀑布流布局的示例代码CSS3实现瀑布流布局与无限加载图片相册的实例代码瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局

 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 < col ){ $item.css({ top: 0, left:i * (width + space) }); //把高度添加进数组中 colHeightArr[i] = height; //也可以用 colHeightArr.push(height); } //其他的都要根据最矮的一列进行排列 }); } })(jQuery);

 (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 < col ){ $item.css({ top: 0, left:i * (width + space) }); //colHeightArr[i] = height; colHeightArr.push(height); //其他的都要根据最矮的一列进行排列 }else{ //找到最矮的那一列进行排列 //索引 var index = 0; //假设最小的高度是第一个索引对应的高度 var minHeight = colHeightArr[index]; //遍历数组，找到最小值和最小值对应的索引 //k是索引，v是值 $.each(colHeightArr,function(k,v){ if(minHeight > 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 < v){ maxHeight = v; } }); //给父容器设置最高的高度 items.height(maxHeight); } })(jQuery);

 $(".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(); } }) render(); });

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