这篇文章主要介绍了原生JavaScript实现瀑布流布局的相关资料,实现鼠标下拉图片自动加载效果，和百度图片效果类似，需要的朋友可以参考下
本文实例讲解了原生JavaScript实现瀑布流布局详细代码，分享给大家供大家参考，具体内容如下
效果图：
具体代码：
HTML
Document
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; } js代码：
window.onload=function(){ imgLocation("container","box"); var imgData={ "data":[ {"src":"2.jpg-600"}, {"src":"3.jpg-600"}, {"src":"4.jpg-600"}, {"src":"5.jpg-600"}, {"src":"6.jpg-600"}, {"src":"7.jpg-600"}, {"src":"8.jpg-600"}, ] }; window.onscroll=function(){ if (checkFlag()) { var cparent=document.getElementById("container"); for (var i = 0; i 希望本文所述对大家学习javascript程序设计有所帮助。
以上就是JavaScript实现瀑布流布局的详细内容，更多请关注0133技术站其它相关文章！
