前端开发技能_三种不同方式瀑布流

前端开发总监 行业技能|web前端开发技术认识|技术部前端开发人员

分别使用javascript,jquerycss实现瀑布流布局:

第一种方式:使用JavaScript:

使用javascript实现瀑布流布局

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>瀑布流布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .clearfix:after,
        .clearfix:before {
            content: ” “;
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .main {
            position: relative;
            -webkit-column-width: 210px;
            -moz-column-width: 210px;
            -webkit-column-gap: 5px;
            -moz-column-gap: 5px;
        }
        .box {
            float: left;
            padding: 15px 0 0 15px;
        }
        .box .pic {
            width: 180px;
            height: auto;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px #cccccc;
            border: 1px solid #cccccc;
        }
        .box .pic img {
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class=”main clearfix” id=”main”>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/0.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/1.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/2.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/3.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/4.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/5.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/6.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/7.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/8.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/9.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/10.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/11.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/12.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/13.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/14.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/15.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/16.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/17.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/18.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/19.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/20.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/21.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/22.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/23.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/24.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/25.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/26.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/27.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/28.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/29.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/25.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/26.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/27.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/28.jpg”>
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”./images/29.jpg”>
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {
            waterfall(‘main’, ‘box’);
            //模拟json数据
            var dataJson = {
                ‘data’: [{
                    ‘src’: ’30.jpg’
                }, {
                    ‘src’: ’31.jpg’
                }, {
                    ‘src’: ’32.jpg’
                }, {
                    ‘src’: ’33.jpg’
                }, {
                    ‘src’: ’34.jpg’
                }, {
                    ‘src’: ’35.jpg’
                }, {
                    ‘src’: ’36.jpg’
                }, {
                    ‘src’: ’37.jpg’
                }, {
                    ‘src’: ’38.jpg’
                }, {
                    ‘src’: ’39.jpg’
                }, {
                    ‘src’: ’40.jpg’
                }, {
                    ‘src’: ’41.jpg’
                }, {
                    ‘src’: ’42.jpg’
                }, {
                    ‘src’: ’43.jpg’
                }, {
                    ‘src’: ’44.jpg’
                }, {
                    ‘src’: ’45.jpg’
                }]
            };
            //监听scroll事件
            window.onscroll = function () {
                var isPosting = false;
                if (checkScollSlide(‘main’, ‘box’) && !isPosting) {
                    var oParent = document.getElementById(‘main’);
                    for (var i in dataJson.data) {
                        isPosting = true;
                        var oBox = document.createElement(‘div’);
                        oBox.className = ‘box’;
                        oBox.innerHTML = ‘<div class=”pic”><img src=”./images/’ + dataJson.data[i].src +
                            ‘”></div>’;
                        oParent.appendChild(oBox);
                    }
                    isPosting = false;
                    waterfall(‘main’, ‘box’);
                }
            }
        }
        /*
         * parent 父元素id clsName 块元素类*/
        function waterfall(parent, clsName) {
            //获取父元素
            var oParent = document.getElementById(parent),
                //获取所有box
                aBoxArr = oParent.getElementsByClassName(clsName),
                //单个box宽度
                iBoxW = aBoxArr[0].offsetWidth,
                // 列数
                cols = Math.floor(document.documentElement.clientWidth / iBoxW);
            oParent.style.cssText = ‘width:’ + iBoxW * cols + ‘px;margin:0 auto;’;
            //储存所有的高度
            var hArr = [];
            for (var i = 0; i < aBoxArr.length; i++) {
                if (i < cols) {
                    hArr[i] = aBoxArr[i].offsetHeight;
                } else {
                    //获取hArr最小值
                    var minH = Math.min.apply(null, hArr),
                        // hArr最小值索引index
                        minHIndex = getMinHIndex(hArr, minH);
                    aBoxArr[i].style.cssText = ‘position:absolute;top:’ + minH + ‘px;left:’ + aBoxArr[minHIndex].offsetLeft +
                        ‘px;’;
                    //添加元素之后更新hArr
                    hArr[minHIndex] += aBoxArr[i].offsetHeight;
                }
            }
        }
        //获取最小值索引
        function getMinHIndex(arr, val) {
            for (var i in arr) {
                if (arr[i] == val) {
                    return i;
                }
            }
        }
        //检查是否满足加载数据条件,parent 父元素id clsName 块元素类
        function checkScollSlide(parent, clsName) {
            var oParent = document.getElementById(parent),
                aBoxArr = oParent.getElementsByClassName(clsName),
                // 最后一个box元素的offsetTop+高度的一半
                lastBoxH = aBoxArr[aBoxArr.length – 1].offsetTop + aBoxArr[aBoxArr.length – 1].offsetHeight / 2,
                //兼容js标准模式和混杂模式
                scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
                height = document.documentElement.clientHeight || document.body.clientHeight;
            return lastBoxH < scrollTop + height ? true : false;
        }
    </script>
</body>
</html>
第二种方式:使用jquery:(html结构跟css同上)

使用jquery实现瀑布流布局

$(window).on(“load”, function () {
    waterfall(‘main’, ‘box’);
    //模拟数据json
    var dataJson = {
        ‘data’: [{
            ‘src’: ’30.jpg’
        }, {
            ‘src’: ’31.jpg’
        }, {
            ‘src’: ’32.jpg’
        }, {
            ‘src’: ’33.jpg’
        }, {
            ‘src’: ’34.jpg’
        }, {
            ‘src’: ’35.jpg’
        }, {
            ‘src’: ’36.jpg’
        }, {
            ‘src’: ’37.jpg’
        }, {
            ‘src’: ’38.jpg’
        }, {
            ‘src’: ’39.jpg’
        }, {
            ‘src’: ’40.jpg’
        }, {
            ‘src’: ’41.jpg’
        }, {
            ‘src’: ’42.jpg’
        }, {
            ‘src’: ’43.jpg’
        }, {
            ‘src’: ’44.jpg’
        }, {
            ‘src’: ’45.jpg’
        }]
    };
    window.onscroll = function () {
        var isPosting = false;
        if (checkscrollside(‘main’, ‘box’) && !isPosting) {
            isPosting = true;
            $.each(dataJson.data, function (index, dom) {
                var $box = $(‘<div class=”box”></div>’);
                $box.html(‘<div class=”pic”><img src=”./images/’ + $(dom).attr(‘src’) + ‘”></div>’);
                $(‘#main’).append($box);
                waterfall(‘main’, ‘box’);
                isPosting = false;
            });
        }
    }
});
/*
parend 父级id
clsName 元素class
*/
function waterfall(parent, clsName) {
    var $parent = $(‘#’ + parent); //父元素
    var $boxs = $parent.find(‘.’ + clsName); //所有box元素
    var iPinW = $boxs.eq(0).width() + 15; // 一个块框box的宽
    var cols = Math.floor($(window).width() / iPinW); //列数
    $parent.width(iPinW * cols).css({
        ‘margin’: ‘0 auto’
    });
    var pinHArr = []; //用于存储 每列中的所有块框相加的高度。
    $boxs.each(function (index, dom) {
        if (index < cols) {
            pinHArr[index] = $(dom).height(); //所有列的高度
        } else {
            var minH = Math.min.apply(null, pinHArr); //数组pinHArr中的最小值minH
            var minHIndex = $.inArray(minH, pinHArr);
            $(dom).css({
                ‘position’: ‘absolute’,
                ‘top’: minH + 15,
                ‘left’: $boxs.eq(minHIndex).position().left
            });
            //添加元素后修改pinHArr
            pinHArr[minHIndex] += $(dom).height() + 15; //更新添加了块框后的列高
        }
    });
}
//检验是否满足加载数据条件,即触发添加块框函数waterfall()的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
function checkscrollside(parent, clsName) {
    //最后一个块框
    var $lastBox = $(‘#’ + parent).find(‘.’ + clsName).last(),
        lastBoxH = $lastBox.offset().top + $lastBox.height() / 2,
        scrollTop = $(window).scrollTop(),
        documentH = $(document).height();
    return lastBoxH < scrollTop + documentH ? true : false;
}
第三种方式:使用css:(html结构同上)

使用css实现瀑布流布局

.clearfix:after,
.clearfix:before {
    content: ” “;
    display: table;
}
.clearfix:after {
    clear: both;
}
.main {
    position: relative;
    <span class=”text_color” style=”color:#ff0000″>-webkit-column-width: 210px;
    -moz-column-width: 210px;
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    </span>
}
.box {
    float: left;
    padding: 15px 0 0 15px;
}
.box .pic {
    width: 180px;
    height: auto;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px #cccccc;
    border: 1px solid #cccccc;
}
.box .pic img {
    display: block;
    width: 100%;
}

瀑布流实现方式比较:
Javascript原生方式/jquery方式
1、 需要计算,列数 = 浏览器窗口宽度/图片宽度,图片定位是根据每一列的高度计算下来图片的位置;
2、 图片排序是按照图片计算的位置横向排列,位置是计算出来的,比较规范

Css方式
1、 不需要计算,浏览器自动计算,只需设置列宽,性能高;
2、 列宽随着浏览器窗口大小进行改变,用户体验不好;
3、 图片排序按照垂直顺序排列,打乱图片显示顺序;
4、 图片加载还是依靠javascript/jquery实现

前端开发技能树|web前端开发技能测试|新的前端开发技术

» 本文来自:前端开发者 » 《前端开发技能_三种不同方式瀑布流》
» 本文链接地址:https://www.rokub.com/4020.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!