三种方式实现瀑布流布局

分别使用javascript，jquery，css实现瀑布流布局：
第一种方式：使用JavaScript：

<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>瀑布流布局</title><style>*{padding:0;margin:0;}.clearfix:after,.clearfix:before {content: " ";display: table;}.clearfix:after {clear: both;}.main {position: relative;-webkit-column-width: 210px;-moz-column-width: 210px;-webkit-column-gap: 5px;-moz-column-gap: 5px;}.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%;}</style></head><body><div class="main clearfix" id="main"><div class="box"><div class="pic"><img src="./images/0.jpg"></div></div><div class="box"><div class="pic"><img src="./images/1.jpg"></div></div><div class="box"><div class="pic"><img src="./images/2.jpg"></div></div><div class="box"><div class="pic"><img src="./images/3.jpg"></div></div><div class="box"><div class="pic"><img src="./images/4.jpg"></div></div><div class="box"><div class="pic"><img src="./images/5.jpg"></div></div><div class="box"><div class="pic"><img src="./images/6.jpg"></div></div><div class="box"><div class="pic"><img src="./images/7.jpg"></div></div><div class="box"><div class="pic"><img src="./images/8.jpg"></div></div><div class="box"><div class="pic"><img src="./images/9.jpg"></div></div><div class="box"><div class="pic"><img src="./images/10.jpg"></div></div><div class="box"><div class="pic"><img src="./images/11.jpg"></div></div><div class="box"><div class="pic"><img src="./images/12.jpg"></div></div><div class="box"><div class="pic"><img src="./images/13.jpg"></div></div><div class="box"><div class="pic"><img src="./images/14.jpg"></div></div><div class="box"><div class="pic"><img src="./images/15.jpg"></div></div><div class="box"><div class="pic"><img src="./images/16.jpg"></div></div><div class="box"><div class="pic"><img src="./images/17.jpg"></div></div><div class="box"><div class="pic"><img src="./images/18.jpg"></div></div><div class="box"><div class="pic"><img src="./images/19.jpg"></div></div><div class="box"><div class="pic"><img src="./images/20.jpg"></div></div><div class="box"><div class="pic"><img src="./images/21.jpg"></div></div><div class="box"><div class="pic"><img src="./images/22.jpg"></div></div><div class="box"><div class="pic"><img src="./images/23.jpg"></div></div><div class="box"><div class="pic"><img src="./images/24.jpg"></div></div><div class="box"><div class="pic"><img src="./images/25.jpg"></div></div><div class="box"><div class="pic"><img src="./images/26.jpg"></div></div><div class="box"><div class="pic"><img src="./images/27.jpg"></div></div><div class="box"><div class="pic"><img src="./images/28.jpg"></div></div><div class="box"><div class="pic"><img src="./images/29.jpg"></div></div><div class="box"><div class="pic"><img src="./images/25.jpg"></div></div><div class="box"><div class="pic"><img src="./images/26.jpg"></div></div><div class="box"><div class="pic"><img src="./images/27.jpg"></div></div><div class="box"><div class="pic"><img src="./images/28.jpg"></div></div><div class="box"><div class="pic"><img src="./images/29.jpg"></div></div></div><script>window.onload = 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"}]};//监听scroll事件window.onscroll = function（）{var isPosting = false;if（checkScollSlide（"main","box"） && ！isPosting）{var oParent = document.getElementById（"main"）;for（var i in dataJson.data）{isPosting = true;var oBox = document.createElement（"div"）;oBox.className = "box";oBox.innerHTML = "<div class="pic"><img src="./images/"+dataJson.data[i].src+""></div>";oParent.appendChild（oBox）;}isPosting = false;waterfall（"main","box"）;}}}/** parent 父元素id clsName 块元素类*/function waterfall（parent,clsName）{//获取父元素var oParent = document.getElementById（parent）,//获取所有boxaBoxArr = oParent.getElementsByClassName（clsName）,//单个box宽度iBoxW = aBoxArr[0].offsetWidth,// 列数cols = Math.floor（document.documentElement.clientWidth / iBoxW）;oParent.style.cssText = "width:"+iBoxW*cols+"px;margin:0 auto;";//储存所有的高度var hArr = [];for（var i = 0; i < aBoxArr.length; i++）{if（i < cols）{hArr[i] = aBoxArr[i].offsetHeight;}else{//获取hArr最小值var minH = Math.min.apply（null,hArr）,// hArr最小值索引indexminHIndex = getMinHIndex（hArr,minH）;aBoxArr[i].style.cssText = "position:absolute;top:"+minH+"px;left:"+aBoxArr[minHIndex].offsetLeft+"px;";//添加元素之后更新hArrhArr[minHIndex] += aBoxArr[i].offsetHeight;}}}//获取最小值索引function getMinHIndex（arr,val）{for（var i in arr）{if（arr[i] == val）{return i;}}}//检查是否满足加载数据条件,parent 父元素id clsName 块元素类function checkScollSlide（parent,clsName）{var oParent = document.getElementById（parent）,aBoxArr = oParent.getElementsByClassName（clsName）,// 最后一个box元素的offsetTop+高度的一半lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,//兼容js标准模式和混杂模式scrollTop = document.documentElement.scrollTop || document.body.scrollTop,height = document.documentElement.clientHeight || document.body.clientHeight;return lastBoxH < scrollTop + height ? true : false;}</script></body></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中的最小值minHvar minHIndex = $.inArray（ minH, pinHArr ）;$（dom）.css（{"position": "absolute","top": minH + 15,"left": $boxs.eq（ minHIndex ）.position（）.left}）;//添加元素后修改pinHArrpinHArr[ 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实现
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！