iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >如何使用JS或CSS实现瀑布流布局
  • 869
分享到

如何使用JS或CSS实现瀑布流布局

2024-04-02 19:04:59 869人浏览 泡泡鱼
摘要

本篇内容主要讲解“如何使用js或CSS实现瀑布流布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用JS或CSS实现瀑布流布局”吧!本着实用精神,我们今天

本篇内容主要讲解“如何使用jsCSS实现瀑布流布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用JS或CSS实现瀑布流布局”吧!

本着实用精神,我们今天来分享一下瀑布流布局昨天有个小兄弟问我怎么做,我找了半天没找到,啊原来写在内网了)。

演示地址: Http://www.lilnong.top/static/html/waterfall.html

瀑布流布局是什么?

比如说 花瓣网蘑菇街 (我下面贴图了), 这些网站在显示内容的时候就使用了瀑布流布局。

我们也想做一个展示我们设计稿(定宽,不定高)的页面,瀑布流是很棒的一种方案。

瀑布流布局其核心是基于一个网格的布局,而且每行包含的项目列表高度是随机的(随着自己内容动态变化高度),同时每个项目列表呈堆栈形式排列,最为关键的是,堆栈之间彼此之间没有多余的间距差存大。还是上图来看看我们说的瀑布流布局是什么样子。

网站蘑菇街花瓣网京东VV
截图如何使用JS或CSS实现瀑布流布局如何使用JS或CSS实现瀑布流布局如何使用JS或CSS实现瀑布流布局如何使用JS或CSS实现瀑布流布局
方案分通道absolute

grid、inline、float 魔性方案

也算是纯 CSS 方案吧,本质上来讲是依赖文档流,从左到右,从上到下。

方案gridinlinefloatbootstrap-grid
截图如何使用JS或CSS实现瀑布流布局如何使用JS或CSS实现瀑布流布局如何使用JS或CSS实现瀑布流布局如何使用JS或CSS实现瀑布流布局

可以看到在文档流布局中有非常明显的的概念,当一个行被撑开就会留下空白,行与行不会重叠。这里最魔性的就是 float 布局了。

DOM 结构
div.list     // 设置 gird 或者 block,注意清除浮动
  div.item   // 设置为 inline 或者 float,使其能流动
    img      // 设置定宽,高度自适应,间距等。
grid 方案说明
.wrap-waterfall--grid img{vertical-align: top;width: 100px}
.wrap-waterfall--grid .list{
    display: grid;
    grid-gap: 10px;
    
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(50px, auto);
}

grid 在某些情况下会比 flex 好用。比如说需要突破行的限制,但是只适用于固定布局,如下图的布局,如果不使用grid你会如何实现呢?

如何使用JS或CSS实现瀑布流布局

网传有 gird 实现瀑布流布局的方案,但是我看了几个他们不是色块,就是图片变形、裁剪,方案是用 nth-child 定高,太恐怖了吧

columns、flex CSS实现 不靠谱方案

也是纯 CSS 方案,相比较上面的方案而言,方案已经可以接受,只是还有部分问题。

  • 顺序是先垂直,后水平

  • (columns)兼容性问题

  • (flex)需要给一个固定高度,会出现超出设定列,以及无法充满设定列。

方案columnsflex
截图如何使用JS或CSS实现瀑布流布局如何使用JS或CSS实现瀑布流布局
columns 方案

天生支持,只需要给父级设置即可 columns: 4; column-gap: 6px;

flex 方案

flex-flow: column wrap;height: 2300px; 默认情况下是水平排列,通过修改为垂直排列并且允许换行,之后把通过固定高度使内容换行。

absolute、通道 高度计算方案 靠谱方案

方案absolute取余分通道计算高度分通道
头部截图如何使用JS或CSS实现瀑布流布局如何使用JS或CSS实现瀑布流布局如何使用JS或CSS实现瀑布流布局

这里的方案就靠谱起来了,可以满足我们使用要求。

我们来回忆一下我们的需求:展示一些内容,内容有特性定宽,不定高。不定高一般是因为内容长度或者高度不一致导致的,常见内容又分为两种文字和图片

  • 文字的话,在没有异步字体的情况下,可以理解为同步就可以获取到盒子高度。

  • 图片的话,因为加载是异步的,所以获取盒子的真实高度也是异步的。但是这里一般分为两种情况

  • 无高度,那么可以通过onload来监听图片加载完成。等图片加载完成再去获取高度。

  • 有高度,这种方案一般用在封面图、或者文章中,在上传图片的时候会保存原图尺寸,这个时候我们就可以直接使用已有数据。

获取图片高度
// 用于获取图片的真实高度
naturalHeight: 1180
// 用于获取图片的真实宽度
naturalWidth: 1200

//用户获取图片当前的渲染高度(会受 css 影响)
height: 98
//用户获取图片当前的渲染宽度(会受 css 影响)
width: 100

// 可返回浏览器是否已完成对图像的加载。如果加载完成,则返回 true,否则返回 fasle。
complete 属性
// 可以监听到图片加载完成的动作
onload

基于上面的内容,那我们可以先判断 complete 属性,

function getImageSize(img){
    if(img.complete){
        return Promise.resolve({
            naturalHeight: img.naturalHeight,
            naturalWidth: img.naturalWidth,
            height: img.height,
            width: img.width,
        })
    }else{
        return new Promise((resolve, reject)=>{
            img.addEventListener('load', ()=>{
                resolve({
                    naturalHeight: img.naturalHeight,
                    naturalWidth: img.naturalWidth,
                    height: img.height,
                    width: img.width,
                })
            })
        })
    }
}
absolute 计算高度方案

因为普通的布局已经无法满足我们的需求,所以我们可以考虑通过 position: absolute 来使内容通过绝对定位来显示

核心操作就是维护每个元素的 left、top,然后使用 left 和 top 去渲染到正确位置。

getListPosition(){
    // 视口宽度 / 每列宽度 得出划分为几列
    let col = this.screenWidth / this.itemWidth >> 0;
    var arr = [];
    for(var i = 0; i < col; i++) arr.push({
        list: [],
        height: 0,
    })
    // 遍历所有元素
    this.listInfo.forEach((item,idx)=>{
        // 找到最低的一列
        var colIndex = 0;
        for(var i = 1; i < col; i++){
            if(arr[colIndex].height > arr[i].height){
                // colItem = arr[i]
                colIndex = i
            }
        }
        // 修改元素的信息
        // 所属列
        item.line = colIndex;
        // 计算之后的 top 距离
        item.top = arr[colIndex].height+ 'px';
        // 计算之后的 left 距离
        item.left = colIndex * (this.itemWidth + 10) + 'px'

        // 累加操作
        arr[colIndex].list.push(item);
        arr[colIndex].height += item.height + 10;
    })
    return arr
},

通过计算,我们可以到,瀑布流布局下每个元素的位置,通过绝对定位就可以实现。

根据下标,来渲染到不同的通道 idx % 4

因为上个方案用到了绝对定位,那么有没有不用绝对定位的方案呢?回到我们的问题点上 定宽,不定高,那我们完全可以通过分开渲染放弃 absolute 来实现。

jsGroupList(){
    return this.list.reduce((s,n,idx)=>{
        // 根据下标,直接分配所属列
        s[idx % 4].push({idx: idx, item: n})
        return s
    }, [[],[],[],[],])
},

看开头是实现类似的功能的,但是有一个弊端(快来评论区回复呀)。

通过高度计算,然后分通道,避免 absolute

因为上一个方案是按下标分类的,其实瀑布流是按高度分类的,所以我们分类条件换成最低的列。

jsGroupHeightList(){
    var list = [
        {height: 0, list: []},{height: 0, list: []},
        {height: 0, list: []},{height: 0, list: []},
    ]
    // 遍历每个元素
    for(var i = 0; i < this.list.length; i++){
        // 当元素有大小的时候在进行操作。
        if(!this.listInfo[i].height) return list;
        // 默认第一个通道是最小高度列
        var minHeightItem = list[0];
        // 计算最小高度列
        list.forEach(v=>{
            if(v.height < minHeightItem.height) minHeightItem = v
        })
        // 把新的元素高度累加到列中。
        minHeightItem.height += this.listInfo[i].height
        // 把新的元素push到列中
        minHeightItem.list.push({idx: i, item: this.list[i]})
    }
    return list;
},

总结

好了,到这里我能想到的方案就都介绍了。你还有什么方案吗?咱们可以在评论区讨论一下可行性。接下来就是我们的方案总结了。

方案优点缺点点评
columns实现简单、纯 CSS 方案兼容性-
flex-需要固定高度,填充难以控制等问题-
float、inline、bootstrapGrid--没点大都用不出这方案
grid--可以nth-child模拟实现、或者等待兼容性 masonry
absolute效果好-JS计算无限可能
js普通通道-填充难以控制-
js优化通道效果好、无绝对定位在出现夸列等操作的时候不是很好控制-

到此,相信大家对“如何使用JS或CSS实现瀑布流布局”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: 如何使用JS或CSS实现瀑布流布局

本文链接: https://www.lsjlt.com/news/73758.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用JS或CSS实现瀑布流布局
    本篇内容主要讲解“如何使用JS或CSS实现瀑布流布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用JS或CSS实现瀑布流布局”吧!本着实用精神,我们今天...
    99+
    2022-10-19
  • 如何用js实现瀑布流布局
    这篇“如何用js实现瀑布流布局”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何用js实现瀑布流布局”文章吧。一、前端代码编...
    99+
    2023-07-05
  • 如何使用纯css实现瀑布流布局
    这篇文章主要为大家展示了“如何使用纯css实现瀑布流布局”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用纯css实现瀑布流布局”这篇文章吧。   1、纯...
    99+
    2022-10-19
  • 如何使用Css Flex 弹性布局实现瀑布流布局
    随着网页设计的不断发展,瀑布流布局成为了一种非常流行的页面布局方式。与传统的网格布局不同,瀑布流布局能够自适应屏幕大小,并且呈现出独特的流动感。在本文中,我们将介绍如何使用CSS Flex 弹性布局来实现瀑布流布局,并提供具体的代码示例。C...
    99+
    2023-10-21
    瀑布流布局 弹性布局 CSS flex
  • 如何用JS实现网页瀑布流布局
    目录前言: 什么是瀑布流布局: 如何实现: 1. 获取图片2. 设置图片宽带3. 计算浏览器页面一行最多能存放图片的数量4. 比较图片高度 5. 得到上一行中最小高度图片的位置6. ...
    99+
    2022-11-12
  • 如何使用HTML和CSS实现瀑布流布局
    如何使用HTML和CSS实现瀑布流布局瀑布流布局(Waterfall Layout)是一种常见的网页布局方式,它可以使网页内容呈现出像瀑布流一样的效果,每一列的高度可以不同,让网页看起来更加有趣和动感。在这篇文章中,我们将介绍如何使用HTM...
    99+
    2023-10-24
    CSS html 瀑布流布局
  • 如何在css中实现瀑布流布局
    这期内容当中小编将会给大家带来有关如何在css中实现瀑布流布局,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。1.multi-column多列布局实现瀑布流先简单的讲下multi-column相关的部分属性...
    99+
    2023-06-15
  • 怎么用JS实现网页瀑布流布局
    这篇文章主要介绍怎么用JS实现网页瀑布流布局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JS是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分...
    99+
    2023-06-14
  • 原生js怎么实现瀑布流布局
    这篇文章主要介绍原生js怎么实现瀑布流布局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!用js实现瀑布流布局以及通过模拟的数据加载图片,已标记注释效果如图:<!DOCTYPE&...
    99+
    2022-10-19
  • js实现瀑布流布局(无限加载)
    本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下 1.实现瀑布流布局思路 准备好数据之后 . 绑定滚动事件 . 判断页面是否到底(滚动的距离+可是区域的高度...
    99+
    2022-11-11
  • 如何使用Bootstrap实现瀑布流布局
    这篇文章将为大家详细讲解有关如何使用Bootstrap实现瀑布流布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、案例介绍瀑布流是近几年流行起来的一种网页布局,视觉表...
    99+
    2022-10-19
  • 如何使用HTML和CSS实现瀑布流图片布局
    如何使用HTML和CSS实现瀑布流图片布局瀑布流图片布局是一种常见的网页设计方式,它通过不规则的列布局将图片呈现在网页上,形成一种自然流动的视觉效果。在本文中,我们将介绍如何使用HTML和CSS实现瀑布流图片布局,并提供具体的代码示例。HT...
    99+
    2023-10-24
    瀑布流布局 (Waterfall layout) HTML 图片布局 (HTML image layout) CSS
  • 如何使用HTML和CSS实现瀑布流图库布局
    如何使用HTML和CSS实现瀑布流图库布局瀑布流布局是一种常见的图库布局方式,它将图片以多列的形式排列,使得页面看起来更加有趣和美观。本文将介绍如何使用HTML和CSS实现瀑布流图库布局,并提供具体的代码示例。一、HTML结构首先,我们需要...
    99+
    2023-10-24
    CSS html 瀑布流布局
  • 如何使用HTML和CSS实现瀑布流卡片布局
    在网页开发中,瀑布流卡片布局是一种常见且炫酷的展示方式。瀑布流布局的特点是卡片呈现不规则的形状,高度和位置会根据内容的多少和屏幕大小自动适应,使页面更具吸引力和互动性。本文将介绍如何使用HTML和CSS实现瀑布流卡片布局,并提供具体的代码示...
    99+
    2023-10-21
    CSS html 瀑布流
  • 如何使用HTML和CSS实现瀑布流网格布局
    瀑布流网格布局是一种常见的布局方式,可以使网页元素呈现出类似瀑布流般的效果,给用户带来更好的视觉体验。本文将介绍如何使用HTML和CSS实现瀑布流网格布局,并提供具体的代码示例。首先,我们需要准备一些HTML结构和CSS样式。下面是一个基本...
    99+
    2023-10-21
    CSS html 瀑布流
  • jquery如何实现瀑布流布局
    这篇文章将为大家详细讲解有关jquery如何实现瀑布流布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.看看效果吧!2.html代码index.html<!DO...
    99+
    2022-10-19
  • JavaScript如何实现瀑布流布局
    这篇文章将为大家详细讲解有关JavaScript如何实现瀑布流布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。就是一堆等宽不等高的数据块组成的页面,如图: 现在好多网站...
    99+
    2022-10-19
  • JavaScriptL如何实现瀑布流布局
    这篇“JavaScriptL如何实现瀑布流布局”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇...
    99+
    2022-10-19
  • 手把手教你用js实现瀑布流布局
    它可以有效的降低页面的复杂度,节省很多的空间;并且,瀑布流的参差不齐的排列方式,可以通过界面展示给用户多条数据,并且让用户可以有向下浏览的冲动,提供了很好的用户体验!例如淘宝的页面就采用了这种布局方式,给大家看看淘宝的瀑布流布局的效果图(手...
    99+
    2023-05-14
    JavaScript
  • css和js如何实现瀑布流效果
    小编给大家分享一下css和js如何实现瀑布流效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JS是什么JS是JavaScript的简称,它是一种直译式的脚本语言...
    99+
    2023-06-09
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作