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 //直接用da
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：CSS 奇思妙想边框动画效果的实现一文教你玩转CSS border(边框)CSS3 按钮边框动画的实现CSS3 实现发光边框特效两款纯CSS3鼠标经过按钮边框动画特效一篇文章带你学习CSS3图片边框css3多种边框悬停按钮填色动画特效css 透明边框background-clip妙用CSS3实现缺角矩形，折角矩形以及缺角边框CSS边框长度控制功能的实现CSS实现半透明边框与多重边框的场景分析
                                                                
下一篇：CSS世界--代码实践之图片alt信息呈现CSS实现背景图片屏幕自适应的实现一篇文章带你学习CSS3图片边框css实现文字在背景图片之上