HTML+CSS+JS实现图片的瀑布流布局的示例代码

以下是HTML+CSS+JS实现图片瀑布流布局的攻略：

什么是图片瀑布流布局

图片瀑布流布局是一种网页排版方式，通过不规则的排列方式，在多个列上交错放置图片，看起来像瀑布一样流动。瀑布流布局时常用于展示图片等内容的的网站，比如国内的花瓣网。

实现步骤

1.编写HTML结构

首先，需要在HTML文件中编写好图片布局的基础结构，即一组div元素，每个div元素包含一张图片。

<div id="main">
    <div class="box">
        <img src="image1.jpg"/>
    </div>
    <div class="box">
        <img src="image2.jpg"/>
    </div>
    <div class="box">
        <img src="image3.jpg"/>
    </div>
    <div class="box">
        <img src="image4.jpg"/>
    </div>
    ...
</div>

2.编写CSS样式

接着，需要为图片布局编写CSS样式，其中包括每个box元素的样式（包含图片宽高），以及main容器的宽度等样式。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#main {
    width: 100%; /*容器宽度*/
}

.box {
    width: 23%; /*图片盒子宽度*/
    margin: 10px; /*盒子间距*/
    float: left; /*浮动*/
}

.box img {
    width: 100%; /*图片宽度*/
    height: auto; /*高度自适应*/
}

3.编写JS代码

最后，需要利用JS代码来实现图片瀑布流的布局效果。这里我们可以使用jQuery库来帮助我们实现。

$(window).on('load', function() {
    waterfall();
});

function waterfall() {
    var $boxArr = $('#main .box');
    var boxWidth = $boxArr.eq(0).outerWidth(); /*第一个图片盒子的宽度*/
    var windowWidth = $(window).width(); /*当前窗口宽度*/

    var cols = Math.floor(windowWidth / boxWidth); /*计算列数*/
    $('#main').width(boxWidth * cols); /*设置#main宽度*/

    var heightArr = [];
    $boxArr.each(function(index, value) {
        var boxHeight = $(this).outerHeight(); /*获取当前box盒子高度*/
        if (index < cols) { /*处理第一行*/
            heightArr[index] = boxHeight;
        } else { /*处理其它行*/
            var minHeight = Math.min.apply(null, heightArr);
            var minIndex = $.inArray(minHeight, heightArr);
            $(value).css({ /*设置图片盒子位置*/
                'position': 'absolute',
                'top': minHeight + 'px',
                'left': $boxArr.eq(minIndex).position().left + 'px'
            });
            heightArr[minIndex] += $(this).outerHeight(); /*更新列高*/
        }
    });
}

上述JS代码，先通过window的load事件来触发函数调用，运行waterfall()函数。在waterfall函数中，我们首先获取.box元素，并计算第一个.box元素的宽度，以及当前浏览器窗口的宽度。然后我们算出需要多少列，让main容器宽度恰好能够容纳cols列图片盒子。

接着我们通过一个“heightArr”数组来存储每列的高度。对于第一行的图片盒子，我们直接存到数组中。对于后面的所有图片盒子，我们需要先找到最小的height，然后把该盒子放到height值最小的那一列中，同时更新该列的高度。

示例1：美团外卖首页

下面我们就以美团外卖的首页为例，来演示如何实现图片瀑布流布局。

同样，我们也需要先编写html和css样式来搭建基础结构。但是美团的图片瀑布流布局略有不同，它是分为两栏的。我们可以通过一个类名.discern来为两栏图片区分开。下面我们来看一下HTML和CSS代码：

<div id="main">
    <div class="discern left">
        <img src="1.png" width="100%" alt="麻辣烫"/>
    </div>
    <div class="discern right">
        <img src="2.png" width="100%" alt="肉夹馍"/>
    </div>
    <div class="discern left">
        <img src="3.png" width="100%" alt="粉丝汤"/>
    </div>
    <div class="discern right">
        <img src="4.png" width="100%" alt="石锅拌饭"/>
    </div>
    ...
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#main {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.discern {
    position: relative;
    float: left;
    width: 575px;
    margin: 0 12px 18px 0;
    overflow: hidden;
    border-radius: .2rem;
}

.discern img {
    display: block;
    width: 100%;
    border-radius: inherit;
}

最后，我们只需要按照上述JS攻略来写JS代码，并在windown.onload事件中调用函数，即可实现美团外卖的图片瀑布流布局效果。

示例2：懒加载

很多网站上的图片都是很大的，为了加快网页的访问速度，通常都需要采用图片懒加载技术。下面我们来说一下如何在图片瀑布流布局中实现图片懒加载。

我们可以使用jQuery的lazyload插件来实现图片的懒加载。该插件的使用很简单，只需要在图片元素上添加data-src属性，并在JS文件中调用lazyload函数，即可实现懒加载。

下面是示例代码：

<div id="main">
    <div class="box">
        <img data-src="image1.jpg"/>
    </div>
    <div class="box">
        <img data-src="image2.jpg"/>
    </div>
    <div class="box">
        <img data-src="image3.jpg"/>
    </div>
    <div class="box">
        <img data-src="image4.jpg"/>
    </div>
    ...
</div>

$(function() {
    $("img").lazyload();
});

在以上示例代码中，我们可以看到每个图片元素上都添加了data-src属性，这是表示图片的真实地址。然后我们在JS文件中调用了lazyload函数，可以自动实现图片的懒加载。

此外，需要注意的是，在使用lazyload函数时，需要事先引入jQuery和lazyload插件。可以使用以下代码：

<head>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="jquery.lazyload.min.js"></script>
</head>

总结

综上所述，实现图片瀑布流布局需要以下几步：

编写HTML结构，包含图片元素盒子。
编写CSS样式，包括容器宽度、图片盒子宽度、以及图片样式等。
编写JS代码，包括计算列数、设置宽度、设置图片位置、以及懒加载等。

相信通过上面的攻略，大家已经能够快速上手实现图片瀑布流布局了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML+CSS+JS实现图片的瀑布流布局的示例代码 - Python技术站