基于JavaScript实现瀑布流布局_javascript技巧-JS Tutorial-php.cn

本文实例讲解了原生JavaScript实现瀑布流布局详细代码，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

HTML

    Document

Copy after login

CSS代码：

*{ margin: 0px; padding: 0px; } #container{ position: relative; } .box{ padding: 5px; float: left; } .box_img{ padding: 5px; border: 1px solid #cccccc; box-shadow: 0 0 5px #ccc; border-radius: 5px; } .box_img img{ width: 150px; height:auto; }

Copy after login

js代码：

window.onload=function(){ imgLocation("container","box"); var imgData={ "data":[ {"src":"2.jpg"}, {"src":"3.jpg"}, {"src":"4.jpg"}, {"src":"5.jpg"}, {"src":"6.jpg"}, {"src":"7.jpg"}, {"src":"8.jpg"}, ] }; window.onscroll=function(){ if (checkFlag()) { var cparent=document.getElementById("container"); for (var i = 0; i < imgData.data.length; i++) { var ccontent=document.createElement("div"); ccontent.className="box"; cparent.appendChild(ccontent); var boximg=document.createElement("div"); boximg.className="box_img"; ccontent.appendChild(boximg); var img=document.createElement("img"); img.src="images/"+imgData.data[i].src; boximg.appendChild(img); } imgLocation("container","box"); } } } function checkFlag(){ var cparent=document.getElementById("container"); var ccontent=getChildnode(cparent,"box"); var lastContentHeight=ccontent[ccontent.length-1].offsetTop; var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var pageHeight=document.documentElement.clientHeight||document.body.clientHeight; if (lastContentHeight
         
          Copy after login

希望本文所述对大家学习javascript程序设计有所帮助。