Web前端-布局|瀑布流图片布局图片|布局|瀑布流|javascript

【Web前端-布局|瀑布流图片布局】自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊，我也自己动手弄了段原生JS代码，实现了简单的“瀑布流”布局效果，并且图片可以无线加载，当然肯定不能和以上那些优秀插件相提并论，有兴趣的朋友，可以去看看，希望能带给你或多或少的收获。

代码片段(1)[全屏查看所有代码] 1. [代码][JavaScript]代码
（1）html代码

瀑布流图片布局 - 锐客网文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片

( 2 )css代码

*{ 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: 0 0 5px #ccc; } .pic img{ width: 165px; height: auto; }

（3）js原生代码

window.onload = function() { waterfall('main', 'box'); var dataInt = { "data": [{ "src": '0.jpg' }, { "src": '5.jpg' }, { "src": '3.jpg' }, { "src": '8.jpg' }] } window.onscroll = function() { if(checkScrollSlide) {var pHali = document.getElementById('main'); for(var i = 0; i < dataInt.data.length; i++) { var obox = document.createElement('div'); obox.className = 'box'; pHali.appendChild(obox); var opic = document.createElement('div'); opic.className = 'pic'; obox.appendChild(opic); var oimg = document.createElement('img'); oimg.src = "https://www.it610.com/article/images/" + dataInt.data[i].src; opic.appendChild(oimg); } waterfall('main', 'box'); } } }function waterfall(hali, box) { var pHali = document.getElementById(hali); var oboxs = getByClass(pHali, box); var oboxW = oboxs[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth / oboxW); pHali.style.cssText = 'width:' + oboxW * cols + '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 = getMinhIndex(hArr, minH); oboxs[i].style.position = 'absolute'; oboxs[i].style.top = minH + 'px'; oboxs[i].style.left = oboxs[index].offsetLeft + 'px'; hArr[index] += oboxs[i].offsetHeight; } } }function getByClass(hali, clsName) { var boxArr = new Array(), oElements = hali.getElementsByTagName('*'); for(var i = 0; i < oElements.length; i++) { if(oElements[i].className == clsName) { boxArr.push(oElements[i]); } } return boxArr; }function getMinhIndex(arr, val) { for(var i in arr) { if(arr[i] == val) { return i; } } }function checkScrollSlide() { var pHali = document.getElementById('main'); var oboxs = getByClass(pHali, 'box'); var lastboxH = oboxs[oboxs.length - 1].offsetTop + Math.floor(oboxs[oboxs.length - 1].offsetHeight / 2); var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; var height = document.body.clientHeight || document.documentElement.clientHeight; return(lastboxH < scrollTop + height) ? true : false; }

2.效果图