JS瀑布流效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS瀑布流效果</title> <style> * { 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; } </style> </head> <body> <div id="container"> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div> </div> <script> window.onload = function () { imgLocation("container", "box"); var imgData = { "data": [{ "src": "1.jpg" }, { "src": "2.jpg" }, { "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "5.jpg" }, { "src": "6.jpg" }, { "src": "7.jpg" }, { "src": "8.jpg" }, { "src": "9.jpg" }, { "src": "10.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 = "/Scripts/img/img1/" + imgData.data[i].src; boximg.appendChild(img); } imgLocation("container", "box"); } } } function checkFlag() { var cparent = document.getElementById("container"); var ccontent = getChildElement(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; console.log(lastContentHeight + " " + scrollTop + " " + pageHeight); if (lastContentHeight < scrollTop + pageHeight) { return true; } } function imgLocation(parent, content) { //将parent下的所有的content全部取出 var cparent = document.getElementById(parent); var ccontent = getChildElement(cparent, content); console.log(ccontent); var imgWidth = ccontent[0].offsetWidth; var num = Math.floor(document.documentElement.clientWidth / imgWidth); cparent.style.cssText = "" + imgWidth * num + "px;margin:0px auto;"; var boxHeightArr = []; for (var i = 0; i < ccontent.length; i++) { if (i < num) { boxHeightArr[i] = ccontent[i].offsetHeight; console.log(boxHeightArr[i]); } else { var minHeight = Math.min.apply(null, boxHeightArr); var minIndex = getMinHeightLocation(boxHeightArr, minHeight); ccontent[i].style.position = "absolute"; ccontent[i].style.top = minHeight + "px"; ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px"; boxHeightArr[minIndex] = boxHeightArr[minIndex] + ccontent[i].offsetHeight; } } } function getMinHeightLocation(BoxHeightArr, minHeight) { for (var i in BoxHeightArr) { if (BoxHeightArr[i] == minHeight) { return i; } } } function getChildElement(parent, content) { var contentArr = []; var allConnect = parent.getElementsByTagName("*"); for (var i = 0; i < allConnect.length; i++) { if (allConnect[i].className == content) { contentArr.push(allConnect[i]); } } return contentArr; } </script> </body> </html>