原生js实现瀑布流及微信小程序中使用左右两列实现瀑布流

最新推荐文章于 2024-08-03 05:52:51 发布

一只叮code的小蚊子

最新推荐文章于 2024-08-03 05:52:51 发布

阅读量1.2k

点赞数 1

分类专栏：微信小程序 html与css JavaScript 文章标签：原生js实现瀑布流微信小程序两列布局实现瀑布流瀑布流微信小程序

本文链接：https://blog.csdn.net/ZJW222/article/details/84938994

版权

本文介绍了如何使用原生JavaScript实现瀑布流布局，并详细讲解了在微信小程序中，通过左右两列的方式实现瀑布流的效果。包括HTML、CSS、JS文件的示例，以及微信小程序的WXML、WXSS和JS文件的代码展示。

摘要由CSDN通过智能技术生成

使用css实现瀑布流并不实用，因为css实现的瀑布流都是以列来排列的，这里记录下用js实现瀑布流，以及微信小程序中使用左右两列来实现瀑布流

1.效果图

2.原生js实现瀑布流

html文件

<div id="root">
    <div class="item">
        <div class="itemImg">
            <img src="../images/1.jpeg" alt="" />
        </div>
    </div>
    <div class="item">
        <div class="itemImg">
            <img src="../images/3.jpeg" alt="" />
        </div>
    </div>
    <div class="item">
        <div class="itemImg">
            <img src="../images/2.jpg" alt="" />
        </div>
    </div>
</div>

图片可以自己找点替换下就可以了
css文件

*{
    margin: 0;
    padding: 0;
}
#root{
    position: relative;
}
.item{
    float: left;
    padding: 5px;
}
/* 添加阴影的时候，加上border会显得更加有点悬浮感 */
.itemImg{
    padding: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
}
.itemImg img{
    width: 230px;
    height: auto;
}

js文件

window.onload = function () {

    /* 计算图片列数及获取最小高度图片 */
    generateImg('root', 'item');

    /* 对窗口大小改变进行监听，大小改变则重新布局 */
    window.addEventListener('resize', function() {
        generateImg('root', 'item')
    });

    /* 图片对象 */
    let imgData = {
        images: [
            {
                "src":"23.png"
            },
            {
                "src":"22.png"
            },
            {
                "src":"2.jpg"
            },
            {
                "src":"4.jpg"
            },
            {
                "src":"7.jpg"
            }
        ]
    };
    /* 对滚动监听 */
    window.addEventListener('scroll', function() {
        if(checkIsScroll()) {
            let rootElement = document.getElementById('root&#