自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊，我也自己动手弄了段原生JS代码，实现了简单的“瀑布流”布局效果，并且图片可以无线加载，当然肯定不能和以上那些优秀插件相提并论，有兴趣的朋友，可以去看看，希望能带给你或多或少的收获。
<!DOCTYPE html>
<html>
<head><title>瀑布流图片布局</title><meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="css/index.css" /><script type="text/javascript" src="js/index.js"></script>
</head>
<body><div 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>
</body>
</html>*{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;
}load = function() {waterfall('main', 'box');var dataInt = {"data": [{"src": '0.jpg'}, {"src": '5.jpg'}, {"src": '3.jpg'}, {"src": '8.jpg'}]}scroll = function() {if(checkScrollSlide) {var pHali = ElementById('main');for(var i = 0; i < dataInt.data.length; i++) {var obox = ateElement('div');obox.className = 'box';pHali.appendChild(obox);var opic = ateElement('div');opic.className = 'pic';obox.appendChild(opic);var oimg = ateElement('img');oimg.src = "images/" + dataInt.data[i].src;opic.appendChild(oimg);}waterfall('main', 'box');}}
}function waterfall(hali, box) {var pHali = ElementById(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].p = minH + 'px';oboxs[i].style.left = oboxs[index].offsetLeft + 'px';hArr[index] += oboxs[i].offsetHeight;}}
}function getByClass(hali, clsName) {var boxArr = new Array(),oElements = ElementsByTagName('*');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 = ElementById('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;
}本文发布于:2024-01-28 15:40:11，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17064276168465.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
