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

来源：互联网发布：linux 网络接口编辑：程序博客网时间：2024/04/30 18:28

用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用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>