实现瀑布流页面的两种方案(纯css3/js)

最新推荐文章于 2024-09-02 22:58:57 发布

shannon2019

最新推荐文章于 2024-09-02 22:58:57 发布

阅读量2.3k

点赞数

分类专栏：前端技术文章标签：瀑布流 javascript css 花瓣滚动加载

本文链接：https://blog.csdn.net/madofu/article/details/86216440

版权

本文探讨了如何实现瀑布流页面设计，分别介绍了使用JavaScript和CSS3的实现思路与具体步骤。通过JavaScript，根据图片加载顺序调整布局以保持页面和谐，同时实现滚动加载。而CSS3则利用Multi-columns布局，简化实现过程。文中还提到了一个实用的瀑布流插件masonry.desandro.com。

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

瀑布流页面设计最初我是在“花瓣”这个产品上看到的，最近一个电商网站也运用了这一设计方式，可能会显得产品更有特色吧。今天我们就讨论下怎么实现一个图片的瀑布流。

思路1：使用JS

通常数据以分页的形式从后端获取，前端加载图片，一行显示两个图片，图片高度要按比例显示。如果左侧图片高就把下一张图片放到右侧，相反如果右侧图片高，就把下一张图片放到左侧，这样可以保持整个页面的布局和谐。同时，在页面滚动到距下方50px时触发滚动加载下一页数据。

具体实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>瀑布流</title>
    <style>
        html, body{
    
            margin: 0;
            padding: 0;
            width: 100%;
        }
        ul{
    
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
        }
        li{
    
            float: left;
        }
    </style>
</head>

<body>
    <div>
        <ul id="left"></ul>
        <ul id="right"></ul>
    </div>
    <script>
    	// src需要替换成实际的图片地址
        const data = [
            [{
    
                src: 'xxx',
                name: 'test1'
            }, {
    
                src: 'xxx',
                name: 'test2'
            }, {
    
                src: 'xxx',
                name: 'test3'
            }, {
    
                src: 'xxx',
                name: 'test4'
            }, {
    
                src: 'xxx',
                name: 'test5'
            }, {
    
                src: 'xxx',
                name: 'test6'
            }],
            [{
    
                src: 'xxx',
                name: 'test21'
            }, {
    
                src: 'xxx',
                name: 'test22'
            }, {
    
                src: 'xxx',
                name: 'test23'