分别使用javascript，jquery，css实现瀑布流布局：
第一种方式：使用JavaScript：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>瀑布流布局</title> 6 <style> 7 *{padding:0;margin:0;} 8 .clearfix:after, 9 .clearfix:before { 10 content: " "; 11 display: table; 12 } 13 .clearfix:after { 14 clear: both; 15 } 16 .main { 17 position: relative; 18 -webkit-column-width: 210px; 19 -moz-column-width: 210px; 20 -webkit-column-gap: 5px; 21 -moz-column-gap: 5px; 22 } 23 .box { 24 float: left; 25 padding: 15px 0 0 15px; 26 } 27 .box .pic { 28 width: 180px; 29 height: auto; 30 padding: 10px; 31 border-radius: 5px; 32 box-shadow: 0 0 5px #cccccc; 33 border: 1px solid #cccccc; 34 } 35 .box .pic img { 36 display: block; 37 width: 100%; 38 } 39 40 41 </style> 42 </head> 43 <body> 44 <div class="main clearfix" id="main"> 45 <div class="box"> 46 <div class="pic"><img src="./images/0.jpg"></div> 47 </div> 48 <div class="box"> 49 <div class="pic"><img src="./images/1.jpg"></div> 50 </div> 51 <div class="box"> 52 <div class="pic"><img src="./images/2.jpg"></div> 53 </div> 54 <div class="box"> 55 <div class="pic"><img src="./images/3.jpg"></div> 56 </div> 57 <div class="box"> 58 <div class="pic"><img src="./images/4.jpg"></div> 59 </div> 60 <div class="box"> 61 <div class="pic"><img src="./images/5.jpg"></div> 62 </div> 63 <div class="box"> 64 <div class="pic"><img src="./images/6.jpg"></div> 65 </div> 66 <div class="box"> 67 <div class="pic"><img src="./images/7.jpg"></div> 68 </div> 69 <div class="box"> 70 <div class="pic"><img src="./images/8.jpg"></div> 71 </div> 72 <div class="box"> 73 <div class="pic"><img src="./images/9.jpg"></div> 74 </div> 75 <div class="box"> 76 <div class="pic"><img src="./images/10.jpg"></div> 77 </div> 78 <div class="box"> 79 <div class="pic"><img src="./images/11.jpg"></div> 80 </div> 81 <div class="box"> 82 <div class="pic"><img src="./images/12.jpg"></div> 83 </div> 84 <div class="box"> 85 <div class="pic"><img src="./images/13.jpg"></div> 86 </div> 87 <div class="box"> 88 <div class="pic"><img src="./images/14.jpg"></div> 89 </div> 90 <div class="box"> 91 <div class="pic"><img src="./images/15.jpg"></div> 92 </div> 93 <div class="box"> 94 <div class="pic"><img src="./images/16.jpg"></div> 95 </div> 96 <div class="box"> 97 <div class="pic"><img src="./images/17.jpg"></div> 98 </div> 99 <div class="box"> 100 <div class="pic"><img src="./images/18.jpg"></div> 101 </div> 102 <div class="box"> 103 <div class="pic"><img src="./images/19.jpg"></div> 104 </div> 105 <div class="box"> 106 <div class="pic"><img src="./images/20.jpg"></div> 107 </div> 108 <div class="box"> 109 <div class="pic"><img src="./images/21.jpg"></div> 110 </div> 111 <div class="box"> 112 <div class="pic"><img src="./images/22.jpg"></div> 113 </div> 114 <div class="box"> 115 <div class="pic"><img src="./images/23.jpg"></div> 116 </div> 117 <div class="box"> 118 <div class="pic"><img src="./images/24.jpg"></div> 119 </div> 120 <div class="box"> 121 <div class="pic"><img src="./images/25.jpg"></div> 122 </div> 123 <div class="box"> 124 <div class="pic"><img src="./images/26.jpg"></div> 125 </div> 126 <div class="box"> 127 <div class="pic"><img src="./images/27.jpg"></div> 128 </div> 129 <div class="box"> 130 <div class="pic"><img src="./images/28.jpg"></div> 131 </div> 132 <div class="box"> 133 <div class="pic"><img src="./images/29.jpg"></div> 134 </div> 135 <div class="box"> 136 <div class="pic"><img src="./images/25.jpg"></div> 137 </div> 138 <div class="box"> 139 <div class="pic"><img src="./images/26.jpg"></div> 140 </div> 141 <div class="box"> 142 <div class="pic"><img src="./images/27.jpg"></div> 143 </div> 144 <div class="box"> 145 <div class="pic"><img src="./images/28.jpg"></div> 146 </div> 147 <div class="box"> 148 <div class="pic"><img src="./images/29.jpg"></div> 149 </div> 150 </div> 151 <script> 152 window.onload = function(){ 153 waterfall('main','box'); 154 155 156 //模拟json数据 157 var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]}; 158 159 160 //监听scroll事件 161 window.onscroll = function(){ 162 var isPosting = false; 163 if(checkScollSlide('main','box') && !isPosting){ 164 var oParent = document.getElementById('main'); 165 for(var i in dataJson.data){ 166 isPosting = true; 167 var oBox = document.createElement('div'); 168 oBox.className = 'box'; 169 oBox.innerHTML = '<div class="pic"><img src="./images/'+dataJson.data[i].src+'"></div>'; 170 oParent.appendChild(oBox); 171 } 172 isPosting = false; 173 waterfall('main','box'); 174 } 175 } 176 177 178 } 179 180 181 /* 182 * parent 父元素id clsName 块元素类*/ 183 function waterfall(parent,clsName){ 184 //获取父元素 185 var oParent = document.getElementById(parent), 186 //获取所有box 187 aBoxArr = oParent.getElementsByClassName(clsName), 188 //单个box宽度 189 iBoxW = aBoxArr[0].offsetWidth, 190 // 列数 191 cols = Math.floor(document.documentElement.clientWidth / iBoxW); 192 193 194 oParent.style.cssText = ''+iBoxW*cols+'px;margin:0 auto;'; 195 196 197 //储存所有的高度 198 var hArr = []; 199 for(var i = 0; i < aBoxArr.length; i++){ 200 if(i < cols){ 201 hArr[i] = aBoxArr[i].offsetHeight; 202 }else{ 203 //获取hArr最小值 204 var minH = Math.min.apply(null,hArr), 205 // hArr最小值索引index 206 minHIndex = getMinHIndex(hArr,minH); 207 aBoxArr[i].style.cssText = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;'; 208 209 210 //添加元素之后更新hArr 211 hArr[minHIndex] += aBoxArr[i].offsetHeight; 212 } 213 } 214 } 215 216 217 //获取最小值索引 218 function getMinHIndex(arr,val){ 219 for(var i in arr){ 220 if(arr[i] == val){ 221 return i; 222 } 223 } 224 } 225 226 227 //检查是否满足加载数据条件,parent 父元素id clsName 块元素类 228 function checkScollSlide(parent,clsName){ 229 var oParent = document.getElementById(parent), 230 aBoxArr = oParent.getElementsByClassName(clsName), 231 // 最后一个box元素的offsetTop+高度的一半 232 lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2, 233 //兼容js标准模式和混杂模式 234 scrollTop = document.documentElement.scrollTop || document.body.scrollTop, 235 height = document.documentElement.clientHeight || document.body.clientHeight; 236 return lastBoxH < scrollTop + height ? true : false; 237 } 238 239 240 </script> 241 242 </body> 243 </html>
第二种方式：使用jquery：(html结构跟css同上)
$( window ).on( "load", function(){ waterfall('main','box'); //模拟数据json var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]}; window.onscroll=function(){ var isPosting = false; if(checkscrollside('main','box') && !isPosting){ isPosting = true; $.each(dataJson.data,function(index,dom){ var $box = $('<div class="box"></div>'); $box.html('<div class="pic"><img src="./images/'+$(dom).attr('src')+'"></div>'); $('#main').append($box); waterfall('main','box'); isPosting = false; }); } } }); /* parend 父级id clsName 元素class */ function waterfall(parent,clsName){ var $parent = $('#'+parent);//父元素 var $boxs = $parent.find('.'+clsName);//所有box元素 var iPinW = $boxs.eq( 0 ).width()+15;// 一个块框box的宽 var cols = Math.floor( $( window ).width() / iPinW );//列数 $parent.width(iPinW * cols).css({'margin': '0 auto'}); var pinHArr=[];//用于存储 每列中的所有块框相加的高度。 $boxs.each( function( index, dom){ if( index < cols ){ pinHArr[ index ] = $(dom).height(); //所有列的高度 }else{ var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH var minHIndex = $.inArray( minH, pinHArr ); $(dom).css({ 'position': 'absolute', 'top': minH + 15, 'left': $boxs.eq( minHIndex ).position().left }); //添加元素后修改pinHArr pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了块框后的列高 } }); } //检验是否满足加载数据条件，即触发添加块框函数waterfall()的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载) function checkscrollside(parent,clsName){ //最后一个块框 var $lastBox = $('#'+parent).find('.'+clsName).last(), lastBoxH = $lastBox.offset().top + $lastBox.height()/ 2, scrollTop = $(window).scrollTop(), documentH = $(document).height(); return lastBoxH < scrollTop + documentH ? true : false; }
第三种方式：使用css：(html结构同上)
.clearfix:after, .clearfix:before { content: " "; display: table; } .clearfix:after { clear: both; } .main { position: relative; [color=#ff0000]-webkit-column-width: 210px; -moz-column-width: 210px; -webkit-column-gap: 5px; -moz-column-gap: 5px;[/color] } .box { float: left; padding: 15px 0 0 15px; } .box .pic { width: 180px; height: auto; padding: 10px; border-radius: 5px; box-shadow: 0 0 5px #cccccc; border: 1px solid #cccccc; } .box .pic img { display: block; width: 100%; }
瀑布流实现方式比较：
Javascript原生方式/jquery方式
1、 需要计算，列数 = 浏览器窗口宽度/图片宽度，图片定位是根据每一列的高度计算下来图片的位置；
2、 图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范
Css方式
1、 不需要计算，浏览器自动计算，只需设置列宽，性能高；
2、 列宽随着浏览器窗口大小进行改变，用户体验不好；
3、 图片排序按照垂直顺序排列，打乱图片显示顺序；
4、 图片加载还是依靠javascript/jquery实现
转自：http://www.qdfuns.com/notes/27624/397dc45aeb17e2da9e0351a3ae973b64.html