瀑布流，宽度固定，高度根据图片和文字内容自适应

最新推荐文章于 2025-04-15 11:13:55 发布

节流子

最新推荐文章于 2025-04-15 11:13:55 发布

阅读量1.2k

点赞数

文章标签： html html5 css jquery

本文链接：https://blog.youkuaiyun.com/weixin_44168784/article/details/119971645

版权

后台返回的数据不确定，特别是图片，大小不固定，文字描述也可能不一样，导致高度不确定，但要求只能n列，这时就需要采用瀑布流布局。瀑布流布局可以直接用css方法，不过不适合动态数据，弹性也可以做，动态数据效果也不理想，好的办法是采用js操作dom，插入新的数据需要计算当前每列的高度，找到最小的列，新的数据就放在这里，然后重新计算高度。参考网上资料，用jq完成效果如下：
在这里插入图片描述

代码如下：

Document

第1行

第2行

第3行

    <div class="item">
        <img src="./img/2.jpg" alt="">
        <div class="words">
            <p>第1行</p>
            <p>第2行</p>
            <p>第3行</p>
            <p>第4行</p>
        </div>
    </div>

    <div class="item">
        <img src="./img/3.jpg" alt="">
        <div class="words">
            <p>第1行 </p>
            <p>第2行</p>
        </div>
    </div>

    <div class="item">
        <img src="./img/4.jpg" alt="">
        <div class="words">
            <p>第1行第1行第1行第1行第1行第1行第1行第1行第1行第1行第1行</p>
            <p>第2行</p>
            <p>第3行</p>
        </div>
    </div>

    <div class="item">
        <img src="./img/5.jpg" alt="">
        <div class="words">
            <p>第1行</p>
            <p>第2行</p>
            <p>第3行</p>
        </div>
    </div>

    <div class="item">
        <img src="./img/6.jpg" alt="">
        <div class="words">
            <p>第1行</p>
            <p>第2行</p>
            <p>第3行</p>
            <p>第4行</p>
            <p>第5行</p>
        </div>
    </div>

    <div class="item">
        <img src="./img/7.jpg" alt="">
        <div class="words">
            <p>第1行</p>
            <p>第2行</p>
            <p>第3行</p>
        </div>
    </div>

    <div class="item">
        <img src="./img/8.jpg" alt="">
        <div class="words">
            <p>第1行</p>
            <p>第2行</p>
            <p>第3行</p>
            <p>第4行</p>
        </div>
    </div>

    <div class="item">
        <img src="./img/9.jpg" alt="">
        <div class="words">
            <p>第1行</p>
            <p>第2行</p>
        </div>
    </div>

    <div class="item">
        <img src="./img/10.jpg" alt="">
        <div class="words">
            <p>第1行</p>
            <p>第2行</p>
            <p>第3行</p>
        </div>
    </div>

    <div class="item">
        <img src="./img/11.jpg" alt="">
        <div class="words">
            <p>第1行</p>
            <p>第2行</p>
            <p>第3行</p>
        </div>
    </div>

    <div class="item">
        <img src="./img/12.jpg" alt="">
        <div class="words">
            <p>第1行</p>
            <p>第2行</p>
            <p>第3行</p>
            <p>第4行</p>
            <p>第5行</p>
        </div>
    </div>

    <div class="item">
        <img src="./img/13.webp" alt="">
        <div class="words">
            <p>第1行</p>
        </div>
    </div>

</div>