<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>哇,瀑布流啊</title> <style type="text/css"> @media screen and (min-width:1550px){ .waterfall-container { width:1400px; } } @media screen and (max-width:1549px) and (min-width:1366px){ .waterfall-container { width:1200px; } } @media screen and (max-width:1365px) and (min-width:700px) { .waterfall-container { width:500px; } } @media screen and (max-width:699px) { .waterfall-container { width:350px; } } .waterfall-container{ top: 0; float:left; display:inline; position:relative; } .water-molecule { position:absolute; border: solid 1px #ccc; padding: 10px; width: 200px; top: 0px; left: 0px; -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out .1s; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s } img { width: 100%; } </style> </head> <body > <div> 哟,好拽的瀑布流!!! </div> <div style="position:relative"> <div style="left:0; float:left; display:inline; width:100px"> <ul id="mediaSet"> <li><a href="#">1300px</a></li> <li><a href="#">1100px</a></li> <li><a href="#">900px</a></li> <li><a href="#">600px</a></li> </ul> </div> <div class="waterfall-container"> <div class="water-molecule"><a href="images/temp_img02.jpg"><img src="images/temp_img02.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img03.jpg"><img src="images/temp_img03.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img04.jpg"><img src="images/temp_img04.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img09.jpg"><img src="images/temp_img09.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img05.jpg"><img src="images/temp_img05.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img06.jpg"><img src="images/temp_img06.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img07.jpg"><img src="images/temp_img07.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img08.jpg"><img src="images/temp_img08.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img09.jpg"><img src="images/temp_img09.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img10.jpg"><img src="images/temp_img10.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img11.jpg"><img src="images/temp_img11.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img12.jpg"><img src="images/temp_img12.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img13.jpg"><img src="images/temp_img13.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img14.jpg"><img src="images/temp_img14.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img15.jpg"><img src="images/temp_img15.jpg"/></a> </div> <div class="water-molecule"><a href="images/temp_img15.jpg"><img src="images/temp_img15.jpg"/></a> </div> </div> </div> <script type="text/javascript"> function minColunmnIndex (arr) { var minColumn = 0; var min = arr[minColumn]; for (var i = 1,len=arr.length; i < len; i++) { var temp = arr[i]; if (temp < min) { minColumn = i; min = temp; }; }; return minColumn; } Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } function waterWall(container,settings){ var _settings = { margin:10, cellClass:"water-molecule" }; if(typeof settings != "undefined"){ _settings = Object.extend(_settings,settings); } var margin = _settings.margin; var boxes = document.getElementsByClassName(_settings.cellClass); var wContainer = container; var boxWidth = boxes[0].offsetWidth + margin; function waterfall () { var columnHeight=[]; var waterFallWith = container.offsetWidth; var n = parseInt(waterFallWith/boxWidth); var columnNum = n == 0 ? 1 : n; var baseLeft = wContainer.offsetLeft; for (var i = 0,l=boxes.length; i <l ; i++) { if (i<columnNum) { columnHeight[i]=boxes[i].offsetHeight+margin; boxes[i].style.top = 0; boxes[i].style.left = i*boxWidth+margin+‘px‘; } else{ var innsertColumn = minColunmnIndex(columnHeight), imgHeight = boxes[i].offsetHeight+ margin; boxes[i].style.top = columnHeight[innsertColumn]+‘px‘; boxes[i].style.left = innsertColumn*boxWidth+margin+‘px‘; columnHeight[innsertColumn] +=imgHeight; }; }; }; var wf = { master: container, waterfall:waterfall } return wf; } var wf = new waterWall(document.getElementsByClassName("waterfall-container").item(0)); window.onload = function(){wf.waterfall();}; window.onresize = function(){ wf.master.style.width = null; wf.waterfall(); }; document.getElementById("mediaSet").addEventListener("click",function(ev){ var link = ev.target, width = link.text; wf.master.style.width = width; wf.waterfall(); },false); </script> </body> </html>
时间: 2024-10-05 12:17:23