码迷,mamicode.com
首页 > 其他好文 > 详细

h5 jq实现瀑布流

时间:2019-11-19 17:14:51      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:char   log   tar   head   item   遍历   int   viewport   class   

<html lang="en">

 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .box {
        position: relative;
        margin: 0 auto;
    }

 

    .item {
        position: absolute;
        width: 200px;
        margin: 5px;
        border: 1px solid #ddd;
        transition: all 1s;
    }

 

    .item img {
        width: 100%;
        height: auto;
    }
</style>

 

<body>
    <div class="box">
        <div class="item"><img
                src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2241344963,3314667459&fm=26&gp=0.jpg" />
        </div>
        <div class="item"><img
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2879759251,3409178712&fm=26&gp=0.jpg" />
        </div>
        <div class="item"><img
                src="https://img-blog.csdn.net/2018071611132815?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" />
        </div>
        <div class="item"><img
                src="https://img-blog.csdn.net/2018071611132815?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" />
        </div>
        <div class="item"><img
                src="https://img-blog.csdn.net/2018071611132815?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" />
        </div>

 

    </div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(function () {
        init();
        $(window).on(‘resize‘, function () {//重新加载
            init();
        });
    })

 

    function init() {
        var boxWidth = $(".item").outerWidth(true);
        // 获取每个小盒子的宽度 包括margin、padding、border
        var cols = parseInt($(window).width() / boxWidth);
        // 获取列数
        var heightArr = [];
        for (var i = 0; i < cols; i++) {
            heightArr.push(0);
        };

 

        //遍历每一张图片
        $(".item").each(function (index, item) {
            var idx = 0;
            var minBoxHeight = heightArr[0];
            // 获取最小高度
            for (var i = 0; i < heightArr.length; i++) {
                if (heightArr[i] < minBoxHeight) {
                    minBoxHeight = heightArr[i];
                    idx = i;
                    // 获取最小高度的索引
                }
            };

 

            // 设置图片的样式
            $(item).css({
                left: boxWidth * idx,
                top: minBoxHeight
            });
            heightArr[idx] += $(item).outerHeight(true);

 

        });
    };

 

</script>

 

</html>

h5 jq实现瀑布流

标签:char   log   tar   head   item   遍历   int   viewport   class   

原文地址:https://www.cnblogs.com/mcll/p/11890459.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!