瀑布流图片布局

来源：互联网发布：淘宝小二介入后不满意编辑：程序博客网时间：2024/05/20 21:20

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

代码片段(1)[全屏查看所有代码]

1. [代码][JavaScript]代码

（1）html代码

<!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>

( 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 = "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.效果图

1 1