js实现图片的瀑布流
先看效果：
初始状态：
瀑布流效果：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>瀑布流</title> <style type="text/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: 200px; height: auto; } </style> <script type="text/javascript"> // 先固定整个屏幕的宽度 即每行的个数 window.onload = function () { imgLocation("container", "box"); }; function imgLocation(parent, content) { //将parent下多有的content全部取出 var cparent = document.getElementById(parent); var ccontent = getChildElement(parent, content); //每个图片的宽度 var imgWidth = ccontent[0].offsetWidth; //每行图片的个数 var num = Math.floor(document.documentElement.clientWidth / imgWidth); //改变container的样式 cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0px auto"; var BoxHeightArr = []; for (var i = 0; i < ccontent.length; i++) { if (i < num) BoxHeightArr[i] = ccontent[i].offsetHeight; else { var minheight = Math.min.apply(null, BoxHeightArr); // console.warn(minheight); var minindex = getminheightLocation(BoxHeightArr, minheight); console.warn(minindex); 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 = 0; i < BoxHeightArr.length; i++) // for (var i in BoxHeightArr) { if (BoxHeightArr[i] == minHeight) { return i; } } } function getChildElement(parent, content) { var contentArr = []; var allcontent = document.getElementsByTagName("*"); for (var i = 0; i < allcontent.length; i++) { if (allcontent[i].className == content) contentArr.push(allcontent[i]); } return contentArr; } </script> </head> <body> <div id="container"> <div class="box"> <div class="box_img"> <img src="img/1 (1).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (2).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (3).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (4).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (5).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (6).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (7).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (8).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (9).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (10).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (11).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (12).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (13).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (14).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (15).jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1 (16).jpg" /> </div> </div> </div> </body> </html>
