瀑布流布局

最新推荐文章于 2023-02-15 19:51:46 发布

LiXSnow

最新推荐文章于 2023-02-15 19:51:46 发布

阅读量301

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/lixsnow/article/details/85134497

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

瀑布流布局的特点：宽度固定，高度不固定

如下：
在这里插入图片描述

实现思路：

每一行添加在高度最低的图片下面
绝对定位

left：图片宽度*索引
top：最小高度

创建一个数组，存放图片高度
用当前窗口的大小除以每个区域的大小再取整，就可以计算出当前窗口大小下应该展示的图片张数（ cols = parseInt($(window).width()/boxWidth) boxWidth为每一个图片的宽度）
简单的说就是可视区域的宽/图片的宽=列数

具体代码：

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
        }
        .item{
            position: absolute;
            width: 200px;
            margin: 5px;
            border: 1px solid #ddd;
            transition: all 1s ease;
        }
        .item img{
            /*height: 100%;*/
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"><img src="img/1.jpg"></div>
        <div class="item"><img src="img/2.jpg"></div>
        <div class="item"><img src="img/3.jpg"></div>
        <div class="item"><img src="img/4.jpg"></div>
        <div class="item"><img src="img/5.jpg"></div>
        <div class="item"><img src="img/6.jpg"></div>
        <div class="item"><img src="img/7.jpg"></div>
        <div class="item"><img src="img/8.jpg"></div>
        <div class="item"><img src="img/9.jpg"></div>
        <div class="item"><img src="img/10.jpg"></div>
        <div class="item"><img src="img/11.jpg"></div>
        <div class="item"><img src="img/12.jpg"></div>
        <div class="item"><img src="img/13.jpg"></div>
        <div class="item"><img src="img/14.jpg"></div>
        <div class="item"><img src="img/15.jpg"></div>
        <div class="item"><img src="img/16.jpg"></div>
        <div class="item"><img src="img/17.jpg"></div>
        <div class="item"><img src="img/18.jpg"></div>
        <div class="item"><img src="img/19.jpg"></div>
        <div class="item"><img src="img/20.jpg"></div>
        <div class="item"><img src="img/22.jpg"></div>
        <div class="item"><img src="img/23.jpg"></div>
    </div>
    <script src="../js基础/jquery-3.3.1.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

js文件

$(function () {
    init();
    $(window).on("resize",function () { // 窗口改变 重新加载
        init();
    });

});
function init() {
    //每行展示的列数
    //width（）不包括padding、margin、border
    //outerWidth（true）包括padding、margin、border
    var boxWidth = $(".item").outerWidth(true); // 每一个宽度
    var cols = parseInt($(window).width()/boxWidth); // 列数
    var heightArr=[];//存放高度
    for(var i=0;i<cols;i++){
        heightArr.push(0); // [0,0,0,...] 初始化数组 cols个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);//更新列高
    })
}

LiXSnow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流布局

瀑布流布局的特点：宽度固定，高度不固定如下：实现思路：每一行添加在高度最低的图片下面绝对定位left：图片宽度*索引top：最小高度创建一个数组，存放图片高度用当前窗口的大小除以每个区域的大小再取整，就可以计算出当前窗口大小下应该展示的图片张数（ cols = parseInt($(window).width()/boxWidth) boxWidth为每一个图片的...
复制链接

扫一扫