纯js实现瀑布流（自动适应窗口大小）


		用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用css3实现，很简单，谷歌一下你就知道。
我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环，即这一行插入进去了，。www.zzzyk.com
然后进入下一个循环插入下一行。公式很简单，假设这一行当前的高度为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>

补充：web前端 , JavaScript ,