JS cascade effect - Layout
<!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> <script> window.onload = function () { imgLocation("container", "box"); } function imgLocation(parent,content) { =cparentvarall of the content at all taken parent// document.getElementById(parent); var ccontent = getChildElement(cparent, content); console.log(ccontent); var imgWidth = ccontent[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth / imgWidth); cparent.style.cssText = "width:" + imgWidth * cols + "px;margin:0px auto;"; } function getChildElement(parent, content) { var contentArr = []; var allConnect = parent.getElementByTagName("*"); for (var i = 0; i < allConnect.length; i++) { if (allConnect[i].className == content) { contentArr.push(allConnect[i]); } } return contentArr; } </script> </body> </html>