純js實現(xiàn)瀑布流展現(xiàn)照片(自動適應窗口大小)

更新時間：2013年04月08日 11:09:03 作者：

用瀑布流來展現(xiàn)照片再好不過了,我的思路大概是一張一張的圖片插入，當這一行的圖片保持長寬比例不變并且高度低于250時就完成一個了循環(huán)，即這一行插入進去了

用瀑布流來展現(xiàn)照片再好不過了，下面是瀑布流（每一行的長度等于瀏覽器窗口的長度）的一種實現(xiàn)方式，也可以用css3實現(xiàn)，很簡單，谷歌一下你就知道。

我的思路大概是一張一張的圖片插入，當這一行的圖片保持長寬比例不變并且高度低于250時就完成一個了循環(huán)，即這一行插入進去了。

然后進入下一個循環(huán)插入下一行。公式很簡單，假設這一行當前的高度為h，則插入一張高和寬為（x，y）的圖片時，滿足下列關系：
h' * (w / h + y / x) = w
w是瀏覽器窗口的寬度，
則 h' = w / (w / h + y / x);

復制代碼代碼如下:

 
<html> 
<head> 
<style> 
img { 
border:1px dashed #000; 
display: inline-block; 
z-index:-1; 
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); 
-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); 
box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); 
//-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); 
//-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); 
//-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); 
//transform: rotate(2deg) translate(-14px,20px) skew(-20deg); 
} 
</style> 
<script src="js/jquery.min.js"></script> 
</head> 
<body onload="display()"> 
<!--div id="title" style="position:absolute;width:300px;height:200px;background:red;"></div--> 
<script type="text/javascript"> 
window.onload=display; 
for (var i = 0; i < 34; ++ i) { 
var div = document.createElement('div'); 
div.setAttribute("id", "div_" + i.toString()); 
div.setAttribute("style", "position:absolute"); 
document.body.appendChild(div); 
} 
for (var i = 0; i < 34; ++ i) { 
var img = document.createElement('img'); 
img.setAttribute('src', '/images/' + 'psb_' + (i + 1).toString() + '.jpg'); 
document.getElementById("div_" + i.toString()).appendChild(img); 
} 
function display() { 
var col = 0; 
var row = document.body.clientWidth - 50; 
var H = 250; 
var h = 0; 
var w = 300; 
var jg = 20; 
var imgs = document.getElementsByTagName("img"); 
for (var i = 0; i < imgs.length; ++ i) { 
var flag = i; 
h = row / imgs[i].width * imgs[i].height; 
while (h > H && i < imgs.length - 1) { 
++ i; 
h = row / (row / h + (imgs[i].width + jg) / imgs[i].height); 
} 
w = 0; 
for (var j = flag; j <= i; ++ j) { 
imgs[j].parentNode.style.top = (col + jg).toString() + "px"; 
imgs[j].parentNode.style.left = (w + jg).toString() + "px"; 
imgs[j].style.height = h.toString() + "px"; 
w = w + h / imgs[j].height * imgs[j].width + jg; 
} 
col += h + jg; 
} 
/* 
var imgs = document.getElementsByTagName("img"); 
for (var i = 0; i < imgs.length; ++ i) { 
if (row + imgs[i].width > document.body.clientWidth + 100) { 
++ col; 
row = 0; 
} 
imgs[i].parentNode.style.top = (col * 250).toString() + "px"; 
imgs[i].parentNode.style.left = row.toString() + "px"; 
row += imgs[i].width + 10; 
} 
*/ 
} 
window.onresize=display; 
//$(window).resize(display); 
</script> 
</body> 
</html> 