谁能知道瀑布流布局求解、求思路、求代码

q510473863 2011-12-28 01:11:09

谁能知道瀑布流布局求解、求思路、求代码

...全文

326 1 打赏收藏举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

sun531782309 2011-12-28

打赏
举报

回复

去淘宝UED里面有讲解，很详细！一看就懂了！
http://ued.taobao.com/blog/2011/09/14/waterfall/

今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。

文章目录前言原生JS实现瀑布流flex属性实现瀑布流列数动态的瀑布流前言在写项目的过程中，整个页面分成了3列，每列的宽度相等而高度不等，且第二行的第一个容器需要放在第一行高度最小的容器下面，所以就在网上查了下，这种布局方式叫做瀑布流布局 原生JS实现瀑布流首先对原生JS实现瀑布流布局的原理进行分析： 瀑布流布局最大的特点就是等宽不等高使用瀑布流布局可以使页面最后一行的容器高度差距最小，所以从第二行开始，每一个容器都要放在第一行容器高度最小的下方，以此类推将所有容器（子元素）放在一个大容器（父

一、什么是瀑布流布局瀑布流布局在当下前端网页设计中越来越流行，主要表现形式为上下高度参差不齐的多行布局，往往图片各异大小不等却能够自动适应排成一排按行进行展示，滚动条下拉还不会不断地自动适应加载数据一直加载到网站最底部，布局方式见下图：瀑布流布局的方式多用在较新颖的图片站点，为了提高用户访问的视觉体验而推出的具有高效吸引力的布局方式，只需要手指滑动一下鼠标滑轮，错落有致的唯美布局便随着滚动的滑轮慢...

还记得那是周五的一个晚上，那天正在寝室用笔记本玩赛博朋克2077 happy 中🥰，突然女朋友给我发了一个小红书的超链接，我像往常一样无视发送的内容直奔链接准备看完赶紧应付几句话继续游戏🤣打开链接以为跟其他类似产品一样都会让你直接选择下载 App，没想到小红书的 PC 端惊到我了，首页出乎意料的好看那时候年轻的我还不知道瀑布流是什么，只是觉得这个布局配合卡片的一些点击交互很有感觉，啧啧啧，我一个大男的看一些女性的推荐都被吸引到了，不过吸引我的不是内容，而是它的布局和交互🤩🤩🤩这段时间全在忙学校实训

微信小程序按顺序排列的瀑布流布局 首先我说一下，我的项目需求： 瀑布流布局排列按照一定的顺序排列图文结合不好意思，跟大家分享下我的过程，不想看的直接跳过看最后，起初的实现思路是： 1、由于图片是从后台获取的，大家都知道image 有一个bindload事件，就是图片加载完成，就是在图片加载完成后获取到该图片的高度，然后通过既定的宽度，算出图片的实际显示高度。 2、知道了图片的实际显示高...

61,117

社区成员

60,701

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章