开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

css瀑布流布局横向

CSS 瀑布流布局横向基础概念

CSS 瀑布流布局（Masonry Layout）是一种流行的网页布局方式，它将元素垂直排列，同时根据元素的宽度自动调整列的高度，使得布局看起来像是由多列组成的。横向瀑布流布局则是将这种布局方式应用于水平方向，元素横向排列，高度自适应。

相关优势

视觉吸引力：横向瀑布流布局可以提供独特的视觉效果，使页面看起来更加动态和有趣。
空间利用率高：通过自动调整列的高度，可以更有效地利用页面空间，减少空白区域。
响应式设计：横向瀑布流布局可以很好地适应不同的屏幕尺寸，提供良好的用户体验。

类型

纯 CSS 实现：使用 CSS Grid 或 Flexbox 可以实现简单的横向瀑布流布局。
JavaScript 辅助：对于更复杂的布局需求，可以使用 JavaScript 来动态计算和调整元素的位置。

应用场景

图片展示：在图片库或相册网站中，横向瀑布流布局可以有效地展示大量图片。
商品展示：在电商网站中，横向瀑布流布局可以用于展示商品列表，提供更好的视觉效果。
文章列表：在博客或新闻网站中，横向瀑布流布局可以用于展示文章摘要，增加页面的吸引力。

示例代码（纯 CSS 实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Masonry Layout</title>
    <style>
        .masonry {
            display: flex;
            flex-wrap: wrap;
            margin-left: -30px; /* Adjust for spacing */
            width: calc(100% + 30px); /* Adjust for spacing */
        }
        .masonry-item {
            background: #ccc;
            margin-left: 30px; /* Adjust for spacing */
            margin-bottom: 30px; /* Adjust for spacing */
            padding: 15px;
            width: calc(25% - 30px); /* Adjust for spacing and number of columns */
        }
        @media (max-width: 1200px) {
            .masonry-item {
                width: calc(33.33% - 30px);
            }
        }
        @media (max-width: 800px) {
            .masonry-item {
                width: calc(50% - 30px);
            }
        }
        @media (max-width: 500px) {
            .masonry-item {
                width: calc(100% - 30px);
            }
        }
    </style>
</head>
<body>
    <div class="masonry">
        <div class="masonry-item">Item 1</div>
        <div class="masonry-item">Item 2</div>
        <div class="masonry-item">Item 3</div>
        <div class="masonry-item">Item 4</div>
        <div class="masonry-item">Item 5</div>
        <div class="masonry-item">Item 6</div>
    </div>
</body>
</html>

参考链接

常见问题及解决方法

元素重叠：确保每个元素的 margin 和 padding 设置正确，避免元素重叠。
列宽不一致：使用媒体查询（Media Queries）根据屏幕尺寸调整列宽，确保在不同设备上都能良好显示。
性能问题：对于大量元素的布局，可以考虑使用虚拟滚动（Virtual Scrolling）技术，只渲染可见区域内的元素，提高页面性能。

通过以上方法，可以有效地实现和优化横向瀑布流布局。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

分享：纯 css 瀑布流和 js 瀑布流

博客地址：https://ainyi.com/60 分享一次纯 css 瀑布流和 js 瀑布流纯 css 写瀑布流 1.multi-columns 方式：通过 Multi-columns 相关的属性... column-count、column-gap 配合 break-inside 来实现瀑布流布局。...看到这里，我们可以发现，使用纯 css 写瀑布流，每一块 item 都是从上往下排列，不能做到从左往右排列： ? 这样子若是动态加载图片的瀑布流，体验就会很不好我们想要的是这样： ?...： css 的绝对定位方式：根据每张图片的位置设置 top 和 left 值： 1 //瀑布流效果 2 //这里有一个坑（已经修复）： 3 //因为是动态加载远程图片，在未加载完全无法获取图片宽高...这实现了横向排列的瀑布流效果欢迎浏览 GitHub：https://github.com/Krryxa 博客地址：https://ainyi.com/60

10.1K4 1

Css实现瀑布流布局

我们只需要设置最外层的父级(waterfall)和子级的父元素(poster)的css...15px; box-sizing: border-box; box-shadow: 0px 0px 7px 0px rgba(183, 183, 183, 0.35); } 加了注释的css

9082 0

JS实现瀑布流页面布局

个人对瀑布流布局理解：每列的宽度相等而高度不等，且第二行的第一个容器需要放在第一行高度最小的容器下面，依次类推放置。...附上代码：代码仅实现了瀑布流的布局方式和 resize 监听，如果大家有需要，可以自己拓展下：实现监听滚动事件，页面滚动加载图片的功能。代码中写了详细注释，可以直接使用。瀑布流布局...获取一行最多可以展示几张图片 let nums = Math.floor(pageWidth / (itemWidth + gap)); // 瀑布流实现原则...for (let i = 0; i < imgLen; i++) { // 如果当前图片元素索引小于一行最多可以展示的图片个数，说明是第一行，top 已在css

3.9K4 0

iOS 瀑布流之栅格布局

:1)、纵长方形(1:2)，动态的根据服务器下发模块样式绘制布局，可以横向滑动，限定为两行的高度。...答案当然是用UICollectionView了，然后自定义流水布局UICollectionViewLayout，主要代码如下：计算记录每一个cell对应的布局属性。...这个样式的栅格布局我已封装集成在WSLWaterFlowLayout 中，详情可以前往下载。...CGRectMake(x, y, w, h); } 后台下发字段格式示意图功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)、栅格布局瀑布流 4种样式的瀑布流布局。

2.3K1 0

CSS 3.0实现瀑布流布局

瀑布流布局是网页中常见的布局效果，一般我们都是用JS实现的，其实用CSS 3.0的属性也可以实现这个功能，并且还自带了响应式功能，效果如下： ? 以下是代码实现，欢迎大家复制粘贴和收藏。 CSS...3.0实现瀑布流布局 h1{ text-align: center; }...border-radius: 8px; } 瀑布流布局

8283 1

分享一次纯 css 瀑布流和 js 瀑布流

博客地址：https://ainyi.com/60 现在百度图片，360 图片搜索，都是以一种瀑布流的形式展示，那么接下来，分享一波纯 css 瀑布流和 js 瀑布流纯 css 写瀑布流 multi-columns...方式通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局。...写瀑布流，每一块 item 都是从上往下排列，不能做到从左往右排列： [kc4aje4u6f.jpeg] 这样子若是动态加载图片的瀑布流，体验就会很不好我们想要的是这样： [no351tx20r.jpeg...] 要实现如上，只能通过 js 来写瀑布流 js 写瀑布流 html 结构与上面类似，但这里我用图片来做示例 ...css 的绝对定位方式：根据每张图片的位置设置 top 和 left 值 // 瀑布流效果 // 这里有一个坑（已经修复）： // 因为是动态加载远程图片，在未加载完全无法获取图片宽高 // 未加载完全就无法设定每一个

3.4K4 0

多栏布局与JS实现瀑布流

css3属性之多栏布局与JS实现瀑布流　　　背景：之前打算自己总结一下flex布局的知识点，发现自己无从下手，原因在何处：我反思了一下，其实原因很简单，使用的次数少，更多的时间使用了百分比，浮动和定位解决...Css3多列　　1）首提的兼容性问题：IE10以及opera支持多列（column），chrome需要-webkit-前缀，Firefox需要-moz-的前缀，Ie9以及更早版本就不支持多列了。...你可以使用这个工具，很方便的查看你的浏览器内核以及版本信息http://ie.icoa.cn/ 　　2）Css3多列属性:css3多列主要是五个属性 column-count　　瀑布流　给自己安利一波吧，看到网上很多瀑布流的效果，哇，简直棒极了有没有；于是我迫不及待的打开V**，打开了pinterest的官网。...自己也梳理梳理逻辑：我们都不陌生瀑布流是同宽的，但是高度不一，js主要的工作就是根据高度来进行布局， 1）当一行排满后，准备排第二行的时候，

3.8K9 0

CSS Layout API初探：瀑布流布局实现

自己在写的小项目中有瀑布流的需求，不久之前刚刚完成瀑布流的布局部分，这部分代码也已经上传到了Github gist。写的时候我就在思考：如果能有更优雅的方式快速实现瀑布流布局该多好。...于是，我便想到了之前无聊时翻看MDN时，CSS Houdini里边所描述的CSS Layout API。正好最近刚写完瀑布流，实践起来比较方便。...如果将来浏览器支持了该特性，那么使用瀑布流布局将会是一件易如反掌的事情，你需要做的，仅仅是引入 masonry.js准备一个父级容器，和一些瀑布流元素（例如卡片）为这个父级元素加上一个布局样式。...">瀑布流元素瀑布流元素瀑布流使用CSS Layout API实现瀑布流的基本逻辑其实和其他实现方式基本是一致的。我们先来定义两个自定义属性，方便之后进行属性值的格式化。

1.4K3 0

vue-css写小程序瀑布流

这几天贴太多代码了，弄几张图吧,js-class-overflow类外面加一个滚动条，固定的高度

1.1K1 0

图片横向等高瀑布流，每行占满，限制行数的实现

图片的横向瀑布流，其实简单地按顺序排列就可以了但要实现每行中各图片都等高（各行不一定等高，但每行里面等高），且每行都占满，就需要用到flex的特性了控制每行图片高度都一致，可能会影响图片的比例，所以不能简单暴力地设置高度...图片宽度的不同，就直接导致了最终高度的不同所以，为了确保图片高度一致，假设有三张图片 50*50 100*100 50*150 放在了同一行中，flex布局会将三张图片所在容器的高度自适应为最高的那个...还要一个问题，如何实现只显示三行显示三行，每行的图片数量不固定，这是通过flex布局自动排列每一行的，都会经过基本排列 -> 分配剩余空间的步骤目前想到的方法是对每一行的容器所占位置进行累加，最后对比即可

2.7K6 0

Swift 自定义布局实现瀑布流视图

，瀑布流视图的惊艳之处就在于它的每个 Cell 的尺寸都是不一致的，那如何生成动态高度的 Cell 呢！...了解完需要实现的函数后，接下来就开始计算瀑布流视图的布局属性了，在这里我先讲一下我实现的大概思路吧！...由于我们瀑布流视图的每个 Cell 的高度是动态的，为了实现这个需求，我们可以声明一个 protocol 并提供一个返回动态高度的方法，来为每个 Cell 提供动态的高度，代码如下： protocol...，然后并把相交的属性返回好了，到这里关于瀑布流视图的布局就讲完了，附上 WaterFallFlowLayout 的全部代码，供大家参考： import UIKit protocol WaterFallLayoutDelegate...50) } } 将上述代码添加到 Xcode 工程中编译并运行，你就会看到 Cell 根据照片的高度正确放置并设置了大小：好了, 利用 UICollectionView 控件与自定义布局实现瀑布流的内容到此就结束了

3.7K3 1

react-masonry-css瀑布流的基本使用

瀑布流介绍瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。逐渐在国内流行开来。...一般使用的网站类型有: 图片画廊：展示不同尺寸的图片，自动调整布局。博客文章：以瀑布流形式展示博客文章摘要，提高阅读体验。电商产品列表：展示不同类别和尺寸的产品，增强用户浏览体验。...社交媒体内容：展示用户生成的内容，如帖子、评论等，形成动态的瀑布流布局。比如: 小红书首页作品的展示, 壁纸软件的壁纸展示等等.....介绍 react-masonry-css 是一个用于创建快速、响应式瀑布流布局的 React 组件，充分利用 CSS 和 React 的虚拟 DOM 渲染。...尽管不支持不同宽度元素的布局和基于高度的排序，但其性能和浏览器兼容性使其成为创建流畅、可靠布局的理想选择。

1.4K1 0

实现列表瀑布流布局（纯css或js定位）

这里就简单记录下这段时间常常要写的瀑布流列表纯css实现：直接上代码 .post-list{/* 列表设置,2列;列间距4*/ -webkit-column-count...getImgUrl(newUrl,10) } } else { return str } } } 代码（上一下我鸡贼的css

2.8K1 0

简单瀑布流

瀑布流什么是瀑布流又称为瀑布流布局，是一种比较经典的网站布局方式，尤其多见于图片较多的页面。常见有两种瀑布流方式。

1.5K1 0

iOS瀑布流

瀑布流Demo 瀑布流截图.gif 使用UICollectionView实现瀑布流自定义UICollectionViewLayout中的主要代码： YJWaterFlowLayout.h中代码: #import...const UIEdgeInsets YJDefaultEdgeInset = {10, 10, 10, 10}; @interface YJWaterFlowLayout () /** 存放所有cell的布局属性...layoutAttributesForElementsInRect:(CGRect)rect { return self.attrsArray; } /** 返回indexPath位置cell对应的布局属性...UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { //设置布局属性...collectionViewContentSize { return CGSizeMake(0, self.maxColumnHeight + self.edgeInsets.bottom); } @end 瀑布流

2.4K4 0

实现瀑布流布局

实现瀑布流布局瀑布流，又称瀑布流式布局。...是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式...实例主体思路是记录每一列的高度，父容器相对定位，成员绝对定位，利用top与left属性控制位置，每次新增加成员时找到高度最低的那个将成员置于其下方，即可实现瀑布流布局。...，还可以使用CSS3新增的column-*多列布局来实现，这两种也就是纯CSS实现的瀑布流布局的方式，但是由于这两种方式都是将成员纵向排列，并不适合需要动态插入成员的布局，当需要动态插入成员时还是需要使用...DOCTYPE html> Js瀑布流布局 <meta name="viewport" content="width=device-width

1.4K1 0

两行css代码实现瀑布流，html,css最简单的瀑布流实现方式且没有缺点！

作者：coder94 https://segmentfault.com/a/1190000017866549 两行css如下: .waterfall-container...实现方式如下：一行里面两列，可以控制每列数量相等，每列里面各自循环，下面伪代码但是有个坑，如果左边都很高，右边比较矮，就会出现右边空很多的内容，在找解决办法下面的指的是 css

2.3K3 0

【Android】网络布局 && 瀑布流布局

super(itemView); ivImage = itemView.findViewById(R.id.iv_img); } } } 四：瀑布流布局...瀑布流通常是多列布局（如 2 列或 3 列）列宽固定：一般是列宽固定，每列宽度由父容器平均分配，因此子项的宽度通常设置为match_parent 行高自适应：高度由自身内容（如图片、文字）决定，不同子项的高度可以不同...centerCrop firXY强行拉伸图片填充满容器，大概率不是原图比例，不会裁剪；centerCrop按比例拉伸填充满容器，会裁剪掉超出部分这就是核心区别五：StaggeredGridRecyclerView 瀑布流布局...注意点 R的导包别导错了，否则找不到Recycler_view控件 2：new StaggeredGridLayoutManager(); 第一个参数2，表示有两列第二个参数表示垂直滚动 //设置瀑布流布局管理器...itemView.findViewById(R.id.text_view); } } } 注意这个点int类型的数字通过String.valueOf()方法很方便的转化为字符串七：总结瀑布流其实也是在

6341 0

瀑布流布局方案

调研： 1、蘑菇街/堆糖/花瓣：absolute 2、手淘：flex，但不算瀑布流，每个card高度一样一、使用flex布局（最妥当）核心： 1、div分两列 2、遍历数据分两组 3、每次渲染完...JSON.parse(JSON.stringify(data1)) this.data2 = JSON.parse(JSON.stringify(data2)) }, ---- 二、使用column（最先进——纯css...） 1、核心 multi-column实现瀑布流主要依赖以下几个属性： column-count: 设置共有几列 column-width: 设置每列宽度，列数由总宽度与每列宽度计算得出 column-gap...: 设置列与列之间的间距 2、避免断层 1）表现：最后一个元素的文本内容被自动断开，一部分在当前列尾，一部分在下一列的列头 2）原因： multi-column布局会将其内的元素自动进行流动和平衡...兼容性一般：column-fill: balance 只在firefox下支持，大部分浏览器只支持默认的column-fill: fill，就只能先渲染完第一列再渲染第二列 2、不适合需要顺序展示的双瀑布流

1.7K2 0

CSS 的正常布局流，是什么？

一、正常布局流是什么？...正常布局流也就是浏览器的默认展现页面的方式，具体步骤是：第一步：把每个元素（Content），都用 padding、border、margin 包裹起来，形成一个盒子；第二步：每个盒子占一行；第三步...DOCTYPE html> 正常布局流 <style...background: white; border: 1px solid black; } 正常布局流...--- 四、参考文档 CSS 的正常布局流，是什么？

9221 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭