JS瀑布流布局
好久没有更新博客喽，今天来说一个瀑布流布局。
瀑布流在很多网站已有很多，现在只说一下简单的实现原理吧，
1、计算一行可以排放几个元素
2、建立一个数组用于存放第一行的每个元素的高度。
3、得到数组中的最少值和索引
4、设置第二行的第一个元素的TOP值为数组中的最小值，同时设置它的LEFT值为第一行索引元素的LEFT值
5、将数组为索引值的元素设置为(第四条中的top值加它的高度)
效果如下图：
代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #main { position: relative; } .box { padding: 15px 0 0 15px; float: left; } .pic { padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0px 0px 5px #ccc; } </style> </head> <body> <div id="main"> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/01.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/02.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/03.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/04.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/05.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/06.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/07.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/10.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg" alt=""/> </div> </div> </div> </body> <script> window.onload = function () { waterfall('main', 'box'); var data = {'data': [ {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/11.jpg'}, {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/12.jpg'}, {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/14.jpg'}, {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/15.jpg'}, {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/01.jpg'}, {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/10.jpg'}, {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/02.jpg'}, {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/03.jpg'} ]}; window.onscroll = function () { if (checkScrollSlide()) { var oParent = document.getElementById('main'); for (var i = 0; i < data.data.length; i++) { var tBox = document.createElement('div'); tBox.className = 'box'; oParent.appendChild(tBox); var tPic = document.createElement('div'); tPic.className = 'pic'; tBox.appendChild(tPic); var tImg = document.createElement('img'); tImg.src = data.data[i].src; tPic.appendChild(tImg); } waterfall('main', 'box'); } }; }; function waterfall(parent, box) { var oParent = document.getElementById(parent); var oBoxs = getByClass(oParent, box); //计算列数 var oBoxW = oBoxs[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth / oBoxW); //set main width //oParent.style.width=cols*oBoxW+'px'; oParent.style.cssText = 'width:' + cols * oBoxW + 'px;margin:0 auto;'; var hArr = []; for (var i = 0; i < oBoxs.length; i++) { if (i < cols) { hArr.push(oBoxs[i].offsetHeight); } else { var minH = Math.min.apply(null, hArr); var index = getArrayIndex(hArr, minH); oBoxs[i].style.position = 'absolute'; oBoxs[i].style.top = minH + 'px'; oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px'; //主要用于进行替换位置数组中高度 让以后的图片进行按这个高度 //进行排序 hArr[index] = minH + oBoxs[i].offsetHeight; } } } function getByClass(parent, clsName) { var boxArray = new Array(); var oElements = parent.getElementsByTagName('*'); for (var i = 0; i < oElements.length; i++) { if (oElements[i].className == clsName) { boxArray.push(oElements[i]); } } return boxArray; } function getArrayIndex(arrayy, val) { for (var i = 0; i < arrayy.length; i++) { if (arrayy[i] == val) { return i; } } } function checkScrollSlide() { var oParent = document.getElementById('main'); var oBoxs = getByClass(oParent, 'box'); var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight); var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; var height = document.body.clientHeight || document.documentElement.clientHeight; return lastBoxH < scrollTop + height; } </script> </html>