07 - 瀑布流特效

---

HTML结构

<div id="main">
    <div class="box"><div class="pic">![](images/0.jpg)</div></div>
    <div class="box"><div class="pic">![](images/1.jpg)</div></div>
    <div class="box"><div class="pic">![](images/2.jpg)</div></div>
    <div class="box"><div class="pic">![](images/3.jpg)</div></div>
    <div class="box"><div class="pic">![](images/4.jpg)</div></div>
    <div class="box"><div class="pic">![](images/5.jpg)</div></div>
    <div class="box"><div class="pic">![](images/6.jpg)</div></div>
    <div class="box"><div class="pic">![](images/7.jpg)</div></div>
    <div class="box"><div class="pic">![](images/8.jpg)</div></div>
    <div class="box"><div class="pic">![](images/9.jpg)</div></div>
    <div class="box"><div class="pic">![](images/10.jpg)</div></div>

    // 省略好多张图片

    <!-- 引入Js文件 -->
    <!-- 通常在body里面引入比较好 不会造成页面加载超载 -->

    <script src="js/index.js"></script>
    <script src="js/Scroll.js"></script>
    <script src="js/Underscore-min.js"></script>
</div>

Css样式

<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        img {
            vertical-align: top;
        }

        body, html {
            width: 100%;
            height: 100%;
        }

        #main {
            position: relative;
        }

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

        .pic {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
        }

        .pic img {
            width: 165px;
        }
</style>

Js代码

window.onload = function () {
    // 1.实现瀑布流布局
    waterFall('main', 'box');

    // 2.滚动加载图片
    window.onscroll = function () {
        // 2.1 判断是否加载图片
        if (checkWillLoadNewImage()) {
            // 2.2 造数据
            var dataArr = [
                {src: '12.jpg'},
                {src: '32.jpg'},
                {src: '15.jpg'},
                {src: '23.jpg'},
                {src: '15.jpg'},
                {src: '34.jpg'},
                {src: '24.jpg'},
                {src: '13.jpg'},
                {src: '25.jpg'}
            ];
            // 2.3 根据数据创建盒子
            for (var i = 0; i < dataArr.length; i++) {
                var newBox = document.createElement('div');
                newBox.setAttribute('class', 'box');
                $('main').appendChild(newBox);

                var newPic = document.createElement('div');
                newPic.setAttribute('class', 'pic');
                newBox.appendChild(newPic);

                var newImg = document.createElement('img');
                newPic.appendChild(newImg);
                newImg.src = 'images/' + dataArr[i].src;
            }
            // 2.4 重新调用瀑布流布局
            waterFall('main', 'box');
        }
    }
}


/**  函数调用1
 * 实现瀑布流布局
 * @param parent 父盒子ID
 * @param child  子盒子Class
 */

function waterFall(parent, child) {
    // -- 父盒子居中 --

    // 1. 获取所有的盒子
    var allBox = $(parent).getElementsByClassName(child);

    // 2. 获取盒子的宽度
    var boxWidth = allBox[0].offsetWidth;

    // 3. 获取屏幕的宽度
    var clientW = document.documentElement.clientWidth || document.body.clientWidth;

    // 4. 求出列数
    var cols = parseInt(clientW / boxWidth);

    // 5. 赋值给父盒子 然后居中
    $(parent).style.width = cols * boxWidth + 'px';
    $(parent).style.margin = '0 auto';


    // -- 子盒子定位 --

    // 1. 定义数组
    var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;
    // 2. 遍历盒子
    for (var i = 0; i < allBox.length; i++) {
        // 3. 取出盒子的高度
        boxHeight = allBox[i].offsetHeight;
        // 4. 把盒子添加进数组
        if (i < cols) {
            heightArr.push(boxHeight);
        }
        // 4.1 剩余其他的盒子
        else {
            // 4.1.1 求出最小盒子的高度
            minBoxHeight = Math.min.apply(null, heightArr);
            // 4.1.2 求出最小盒子的索引号
            minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);

            // 4.1.2 子盒子定位
            allBox[i].style.position = 'absolute';
            allBox[i].style.left = minBoxIndex * boxWidth + 'px';
            allBox[i].style.top = minBoxHeight + 'px';

            // 更新高度
            heightArr[minBoxIndex] += boxHeight;
        }
    }

}

/**   函数调用2
 * 最小索引
 * @param arr  数组
 * @param val  索引值
 * @returns {返回索引值}
 */

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

/**   函数调用3
 * 判断是否加载图片
 */
function checkWillLoadNewImage() {
    // 1.获取所有的盒子
    var allBox = $('main').getElementsByClassName('box');
    // 2.得到最后一个盒子
    var lastBox = allBox[allBox.length - 1];
    // 3.求出最后一个盒子高度的一半 + 头部偏离的高度
    var lastBoxDis = lastBox.offsetWidth * 0.5 + lastBox.offsetTop;
    // 4.求出屏幕的高度
    var screenH = document.documentElement.clientHeight || document.body.clientHeight;
    // 5. 求出页面偏离头部的距离
    var scrollTop = scroll().top;

    // console.log(lastBoxDis, screenH, scrollTop); 开发中时时进行打印检测 防止错误bug

    return lastBoxDis <= scrollTop + screenH;

}

特效展示

瀑布流.gif