纯js兑现瀑布流（自动适应窗口大小）-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20474 次

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

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>