JS瀑布流布局

好久没有更新博客喽，今天来说一个瀑布流布局。
瀑布流在很多网站已有很多，现在只说一下简单的实现原理吧，
1、计算一行可以排放几个元素
2、建立一个数组用于存放第一行的每个元素的高度。
3、得到数组中的最少值和索引
4、设置第二行的第一个元素的TOP值为数组中的最小值，同时设置它的LEFT值为第一行索引元素的LEFT值
5、将数组为索引值的元素设置为(第四条中的top值加它的高度)
效果如下图：
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main {
            position: relative;
        }

        .box {
            padding: 15px 0 0 15px;
            float: left;
        }

        .pic {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0px 0px 5px #ccc;
        }
    </style>
</head>
<body>
<div id="main">
    <div class="box">
        <div class="pic">
            <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/01.jpg"
                 alt=""/>
        </div>

    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/02.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/03.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/04.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/05.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/06.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/07.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/10.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img
                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"
                    alt=""/>
        </div>
    </div>

</div>
</body>
<script>
    window.onload = function () {
        waterfall('main', 'box');
        var data = {'data': [
            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/11.jpg'},
            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/12.jpg'},
            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/14.jpg'},
            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/15.jpg'},
            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/01.jpg'},
            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/10.jpg'},
            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/02.jpg'},
            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/03.jpg'}
        ]};

        window.onscroll = function () {
            if (checkScrollSlide()) {
                var oParent = document.getElementById('main');
                for (var i = 0; i < data.data.length; i++) {
                    var tBox = document.createElement('div');
                    tBox.className = 'box';
                    oParent.appendChild(tBox);
                    var tPic = document.createElement('div');
                    tPic.className = 'pic';
                    tBox.appendChild(tPic);
                    var tImg = document.createElement('img');
                    tImg.src = data.data[i].src;
                    tPic.appendChild(tImg);
                }
                waterfall('main', 'box');
            }

        };
    };
    function waterfall(parent, box) {
        var oParent = document.getElementById(parent);
        var oBoxs = getByClass(oParent, box);
        //计算列数
        var oBoxW = oBoxs[0].offsetWidth;
        var cols = Math.floor(document.documentElement.clientWidth / oBoxW);
        //set main width
        //oParent.style.width=cols*oBoxW+'px';
        oParent.style.cssText = 'width:' + cols * oBoxW + 'px;margin:0 auto;';
        var hArr = [];
        for (var i = 0; i < oBoxs.length; i++) {
            if (i < cols) {
                hArr.push(oBoxs[i].offsetHeight);
            } else {
                var minH = Math.min.apply(null, hArr);
                var index = getArrayIndex(hArr, minH);
                oBoxs[i].style.position = 'absolute';
                oBoxs[i].style.top = minH + 'px';
                oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px';

                //主要用于进行替换位置数组中高度 让以后的图片进行按这个高度
                //进行排序
                hArr[index] = minH + oBoxs[i].offsetHeight;

            }
        }


    }
    function getByClass(parent, clsName) {
        var boxArray = new Array();
        var oElements = parent.getElementsByTagName('*');
        for (var i = 0; i < oElements.length; i++) {
            if (oElements[i].className == clsName) {
                boxArray.push(oElements[i]);
            }
        }
        return boxArray;

    }

    function getArrayIndex(arrayy, val) {
        for (var i = 0; i < arrayy.length; i++) {
            if (arrayy[i] == val) {
                return i;
            }
        }
    }

    function checkScrollSlide() {
        var oParent = document.getElementById('main');
        var oBoxs = getByClass(oParent, 'box');
        var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight);
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var height = document.body.clientHeight || document.documentElement.clientHeight;
        return lastBoxH < scrollTop + height;
    }

</script>
</html>
posted @ 2014-06-21 17:53 zhu_xj 阅读(1939) 评论(1) 收藏举报
刷新页面返回顶部
zhu_xj

JS瀑布流布局

公告
