h5开发，column布局实现瀑布流，定宽不定高踩坑记录

注意：使用column虽然简单、而且性能优秀，但是存在一定的瑕疵：无限滚动加载，数据越多，它会优先从左列往下排序，这就导致数据越多，会造成列表数据顺序移动。如果不在乎这个瑕疵，可以继续往下看看。

先来张最终实现的效果图吧。

一、首先需要在你父级容器上添加最重要的两个属性：

column-count: 2;（这个属性指定列数为2）

column-gap：12px;(这个属性指定列间距为12px）

二、这个布局最大的坑在子元素上，子元素会出现内容被截断的情况，这里有三种解决方案

1子容器添加：height: 100%; overflow: auto;（不存在兼容性问题，没测试过）

2子容器添加：break-inside: avoid（ios存在兼容性问题，会导致首行对不齐，末行排列错乱等情况）

3子元素设置：display: inline-block;（亲测有效，并且兼容ios，推荐使用此方法）

以上纯属记录个人踩坑记录，欢迎大佬们提意见，水平有限，如有错误之处，还请多多包涵。

瀑布流式布局的做法有很多种，看你的网站可以看出，你应该对WEB前端开发研究得不是很深，那我给你介绍一种最简单的实现方式，只需要通过HTML+CSS就可以实现了。

以三列为例，界面中放三个DIV，每个DIV宽度固定，高度自适应，使用浮动，也就是float:left，然后页面就会变成三列，然后让每列里面内容自适应往下撑就可以了。

一般瀑布流布局跟随着的效果就是延时加载，也就是页面拉到底部时，会自动加载出一批新的内容，这样效果最佳，如果你对JS也有些研究的话，就可以在调用内容时，判断下三个DIV的高度，哪个DIV高度最小，就往哪个DIV里添加内容，就OK了

这是因为还没加载完的时候执行了布局。所以出现了这个问题。

要等到加载完再布局。

或者设置的高度(如果你提前知道宽高，这个应该是最好的)。

或者window的onload事件触发之后再布局(这时候都加载完了)。

适合于产品展示，不适合到处都用，是个很好的插件。

瀑布流网页布局设计，现在有泛滥成灾之势，不过存在即合理，瀑布流为什么这么走俏，是因为它能满足用户的体验与需要。而对于瀑布流式布局，想必网页设计师们已不再陌生，随着pinterest自2011年开始走红，瀑布流式的布局被越来越多的网站所使用。国内的花瓣网、堆糖网、布兜、发现啦，美丽说，蘑菇街，人人逛街，凡客达人等，复制Pinterest的网站在中国蜂拥而现，粗略估计已有上百家之多。

为什么选择瀑布流？对的展现高效有吸引力

既然pinterest式蜂拥而现，我们先从体验角度看，瀑布流布局为什么好？

笔者浅见。随着读图时代快餐式消费的来临，瀑布流对于的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免里用户鼠标点击的翻页 *** 作,这么浏 览起来,随着鼠标的滚动,是不是最小的 *** 作成本能获得做多的内容体验,是不是比较容易沉浸其中,不被打断。有没有逛起街来边走边看,被琳琅满目的商品吸引 的感觉呢

除此之外，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳。

Pinterest

Pinterest于2011年诞生，如今每月独立访问用户数量已突破1100万，平均每位用户每月在网站上逗留98分钟，这一时长在诸多社交平台中仅次于Tumblr和Facebook。Pinterest作为瀑布流布局的鼻祖，必然引导瀑布流设计的方向。

吸顶式导航

为什么使用吸顶式导航呢？用户在瀑布流模式下一目十行去浏览，如果快速切换到分类，又要回到顶部，然后再选取分类，吸顶式导航可以让用户轻松切换分类，设计要点，吸顶式导航不可以太宽，色彩上不可以太抢眼，只需要保证用户在需要时，它悄悄的在就可以。

2评论的锚点定位

pinterest起初设计是评论框全部默认展示的， 意在鼓励用户输入评论。而在最近的改版中，pinterest的评论框的设计改为:当和已有评论长度较小时，评论框默认收起，点击评论的 *** 作 button后，锚点定位到评论框，同时光标闪动，提示用户输入文字。而和已有评论较长时（接近或大于一屏的高度），默认评论框打开，因为用户如果靠 评论的button打开评论框需要回滚较多距离，成本太高。

3轻巧的大图设计

点击空白区域收起，再次点击大图跳转到来源网站。非常适合轻松随意的阅读尤其是当用户适应此处的设计逻辑后，很容易产生沉浸式浏览，同时又满足了查看细节的需要。

4占位加载，保持视觉体验的顺畅

用户在不断滚动鼠标滚轮浏览的过程中，网速并不总是尽如人意的，因此采用占位加载形式（预加载出高度的灰度图），不让加载过程中画面过于跳动，

可以让用户视觉体验平缓些，视觉过度流畅，尽量小的干扰用户浏览的行为。

移动端不同于PC端，最大的区别是屏幕尺寸的限制，相同的内容显示效率要低很多。如果直接按照PC端显示所有内容，页面信息自然混乱不堪。作为交互设计师需要对信息进行优先级划分，并且合理布局，提升信息的传递效率。下面来谈谈手机界面设计中常用到的一些页面布局。

1 list 布局

优点

list列表纵向长度没有限制，上下滑动可以查看无限内容；

list列表在视觉上整齐美观，用户接受度很高；

list列表可以展示内容长和次级文字的标题。

缺点

页面跳转后总是从头开始；

一页展示内容过多，用户疲劳度增加；

页面重点内容不突出。

场景

常用于并列元素的展示，包括目录、分类、内容等。

2 网格布局

优点

各入口展示清晰，方便快速查找。

缺点

扩展性不如list列表；

标题不易过长。

场景

适合展示较多入口，且各模块相对独立。

3 仪表布局

优点

展示更加直观。

缺点

信息展示量少，过于单一。

场景

适合表现趋势走向的展示。

4 卡片布局

优点 每个卡片信息承载量大，转化率高；

每张卡片的 *** 作互相独立，互不干扰。

缺点

每个卡片页面空间的消耗大，一屏可展示信息少，用户 *** 作负荷高。

场景

适合以为主单一内容浏览型的展示。

5 gallery布局

优点

单页面内容整体性强，聚焦度高；

线性的浏览方式有顺畅感、方向感。

缺点

可显示的数量有限，需要用户探索；

不具有指向性查看页面，必须按顺序查看页面。

场景

适合数量少，聚焦度高，视觉冲击力强的展示。

6 瀑布流布局

-

优点

瀑布流展现具有吸引力；

瀑布流里的加载模式能获得更多的内容，容易沉浸其中；

瀑布流错落有致的设计巧妙利用视觉层级，同时视线任意流动缓解视觉疲劳。

缺点

页面跳转后需要从头开始，加载量不固定，理论上是无限延展；

用户返回查找信息困难很大。

场景

适用于实时内容频繁更新的情况。

7 手风琴布局

优点

两级结构可承载较多信息，同时保持界面简洁；

减少界面跳转，提高 *** 作效率高。

缺点

同时打开多个手风琴菜单，分类标题不易寻找，且容易将页面布局打乱。

场景

适用于两级结构的内容，并且二级结构可以隐藏。,

8 多面板布局

优点

减少界面跳转；

分类一目了然。

缺点

两栏设计使界面比较拥挤；

分类很多时，左侧滑动区域过窄，且不利于单手 *** 作。

场景

适合分类多并且内容需要同时展示。

三种本质区别就是布局方式不同。

瀑布流：

又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是Pinterest，后逐渐在国内流行。我们看到的一些vlog网站或者展示网站，对于大小高度不一的能自动适应排列，在下拉到底的时候，加载的也可以自动适应。

瀑布流更适合那些随意浏览，不带目的性的使用场景，就像是在逛街一样，边走边看，同时被街边琳琅满目的商品吸引着，所以比较适合的、小说、资讯类的场景，以现有的成功案例来说，以 UGC 为主的相关网站很多在使用瀑布流进行承载。

Feed流：

顾名思义，Feed是喂养的意思，你想吃什么，就喂给你什么，典型的例子就是微博、知乎的首页，以及各个聚合类资讯app的订阅号。feed流“千人千面”，会针对用户的喜好，推送给用户喜欢的内容。例如抖音、淘宝、知乎。

Feed流的应用场景有：

1、兴趣订阅类产品。针对不同的用户喜好推送不同的内容。

2、针对用户画像差别推荐的产品。与兴趣订阅类不同的事，兴趣是用户自发的行为，而用户画像是通过大数据分析用户行为，有针对性的推荐商品。

3、特定推送类。付费类产品，比如得到app。

以视频为代表形成的创业特点有个性化服务、“瀑布流”布局、“互动”特色。

1、流行的多数视频一般是由某个用户创造出一个特定的表演模式，其他用户模仿视频中的固定行为和叙事风格。

2、个性化的内容推荐机制是基于头条的算法和新型的人机交互功能，海量的视频会自动被推送给用户，而不是用户主动地去找内容，这是依赖对用户生活场景的识别完成的。

3、平台具有个性化标签的分类服务，允许用户对每个标签、每个主题下的视频和音乐进行收藏或者使用。用户还可以通过点赞转发、评论等行为分享他人的视频，从而建立起以视频为基础的虚拟社区。

瀑布流布局简介：

一、瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局。

二、瀑布流原理是页面容器内的多个高度不固定的div之间按照一定的间隔参差不齐的无序浮动，鼠标滚动时不断在容器内的尾部加载数据，且自动加载到空缺位置，不断循环。

三、优点：

1、有效降低了界面复杂度，节省了空间，不再需要臃肿复杂的页面导航链接或者按钮了。

2、在触屏设备上交互方式有更好的用户体验，通过向上滑动进行页面滚动和数据加载，对 *** 作的精准程度要求远远低于点击按钮或者链接。

3、更高的参与度，使用户能更好地专注于浏览而不是 *** 作。

以上就是关于h5开发，column布局实现瀑布流，定宽不定高踩坑记录全部的内容，包括:h5开发，column布局实现瀑布流，定宽不定高踩坑记录、css相关问题、瀑布流布局 代码性能问题 JavaScript等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！