一分钟解决瀑布流布局,小白也能看懂
瀑布流算法范文
瀑布流算法范文瀑布流布局最早应用于电影海报展示，后来被广泛应用于图片墙、社交网络、电子商务等网站。
它以一种瀑布流的方式呈现内容，将不同大小的图片或信息按照一个参考点水平展开，填满一行后再自动跳转到下一行。
这种布局方式不仅美观，而且可以在有限的空间内最大化地展示内容。
1.设置固定的块宽度：为了实现瀑布流布局，我们首先需要设置每个元素的宽度是固定的。
这样可以确保每行的元素数目一致，从而使得布局看起来整齐。
2.确定参考点：在网页布局中，通常需要一个参考点来确定元素的位置。
对于瀑布流布局，我们可以选择每一行最低元素的下方作为参考点。
这样，在添加新的元素时我们可以参考这个位置进行布局。
3.动态调整元素位置：当一个新的元素需要被添加到布局中时，我们需要动态地确定它的位置。
这就需要计算出参考点的坐标，并将元素放置在该位置。
同时，为了避免元素之间的重叠，我们需要上移其他元素以腾出空间。
4.动态调整参考点：在添加元素后，参考点的位置将发生改变。
为了保持布局的平衡，我们需要动态地调整参考点的位置。
通常情况下，参考点会上移一个元素的高度，从而保持布局的平衡。
瀑布流布局的优点在于它能够在有限的空间内最大化地展示内容。
它能够适应不同屏幕尺寸和设备，使得内容在任何环境下都能够得到良好的展示效果。
另外，由于瀑布流布局采用了动态调整的方式，可以灵活地适应不同尺寸的元素，不会出现空白的空间。
然而，瀑布流布局也存在一些问题。
由于元素的位置是动态调整的，当元素的高度差异较大时可能会导致布局的不平衡。
此外，对于需要按照特定顺序展示的内容，瀑布流布局可能会导致顺序混乱，影响用户的阅读体验。
为了解决这些问题，可以采用一些优化策略。
例如，可以在添加新元素时根据预设的规则或权重来确定元素的位置，从而保持布局的平衡。
另外，可以使用加载时机的策略，在用户滚动到底部时再加载新的内容，避免一次性加载过多的元素。
总之，瀑布流算法是一种常见的网页布局技术，可以有效地展示图片或信息。
瀑布流排序规则
瀑布流排序规则
瀑布流是一种常见的网页布局方式，它的特点是将内容以多栏的形式呈现在网页上，给用户带来更好的浏览体验。
而瀑布流排序规则则是指根据一定的规则将内容按照一定的顺序排列在网页上，以达到更好的展示效果。
首先，瀑布流排序规则可以根据内容的重要性进行排序。
通常情况下，网页的内容会根据重要性进行排序，将重要的内容放在前面展示给用户。
这样可以吸引用户的注意力，让用户更加关注这些重要的内容。
其次，瀑布流排序规则可以根据内容的热度进行排序。
热门的内容往往能够吸引更多的用户，因此将热门内容排在前面可以提高用户的点击率和转化率。
这样可以增加网页的流量，提升用户的体验。
另外，瀑布流排序规则还可以根据内容的时效性进行排序。
一些具有时效性的内容，比如最新的新闻、热门的活动等，往往会吸引更
多的用户关注。
因此，将这些具有时效性的内容排在前面，可以让用户更容易找到并浏览到这些内容。
此外，瀑布流排序规则还可以根据用户的个人喜好进行排序。
通过分析用户的浏览历史、兴趣爱好等信息，可以了解用户的偏好，并将符合用户兴趣的内容排在前面展示给用户。
这样可以提高用户的满意度，增加用户的粘性。
总的来说，瀑布流排序规则是通过一定的规则将内容进行排序，以达到更好的展示效果和用户体验。
通过根据内容的重要性、热度、时效性以及用户个人喜好等进行排序，可以吸引用户的注意力，提高用户的点击率和转化率，增加网页的流量，提升用户的满意度。
瀑布流排序规则的应用可以为用户提供更好的浏览体验，使他们更容易找到自己感兴趣的内容。
前端开发中的瀑布流布局实现指南
前端开发中的瀑布流布局实现指南瀑布流布局是一种常见的网页布局形式，它像瀑布一样，将内容以不规则的方式排列在页面上，给用户一种流动感和动态效果。
瀑布流布局在图片墙、新闻列表等场景中广泛应用，让网页更有吸引力和活力。
本文将介绍前端开发中瀑布流布局的实现指南，帮助开发者快速掌握相关技巧。
一、瀑布流布局的基本原理瀑布流布局的基本原理是将内容按照列数进行分组，然后依次将内容插入每一列中，使得每一列的高度尽可能平衡。
当新内容被插入时，会选择当前高度最小的列进行插入，以保持整体的平衡性。
二、瀑布流布局的实现方法1. 使用CSS实现瀑布流布局最简单的方法就是使用CSS实现。
我们可以定义多个列的容器，然后设置它们的宽度和浮动属性。
通过为每个内容元素设置不同的浮动属性和宽度，就可以实现瀑布流的效果。
例如，我们可以使用以下CSS代码实现一个简单的瀑布流布局：```.column {width: 33.33%;float: left;}.item {width: 100%;margin-bottom: 20px;}```在HTML中，我们可以将内容元素放在多个列的容器中，如下所示：```html<div class="column"><div class="item">内容元素1</div><div class="item">内容元素2</div><div class="item">内容元素3</div>...</div><div class="column"><div class="item">内容元素4</div><div class="item">内容元素5</div><div class="item">内容元素6</div>...</div><div class="column"><div class="item">内容元素7</div><div class="item">内容元素8</div><div class="item">内容元素9</div>...</div>```2. 使用JavaScript插件实现除了使用CSS实现瀑布流布局，我们还可以借助一些JavaScript插件来简化实现过程，以提高开发效率。
瀑布流排序规则
瀑布流排序规则瀑布流（Waterfall）是一种常见的网页布局方式，它将内容以多列的形式呈现，每一列的高度不固定，根据内容的高度自动调整。
瀑布流排序规则则是为了使得网页中的内容更加有序和美观而设计的一种排列方式。
下面将详细介绍瀑布流排序规则的原理和应用。
一、瀑布流排序规则的原理瀑布流排序规则的原理主要包括以下几个方面：1. 定义列数：首先需要确定瀑布流的列数，根据网页的设计和内容的宽度来决定。
一般情况下，较宽的屏幕可以选择更多的列数，而较窄的屏幕则需要减少列数。
2. 计算元素位置：对于每一个要排列的元素，根据其高度和当前每一列的高度来确定其位置。
为了实现更好的视觉效果，可以给每一列设置一个最小高度，这样可以避免出现某一列过高而导致整体不平衡的情况。
3. 动态调整元素位置：当页面滚动时，需要根据用户的浏览情况来动态调整元素的位置。
一般情况下，可以根据元素的位置和屏幕的滚动位置来判断元素是否在可视区域内，如果在可视区域内则显示，否则隐藏。
二、瀑布流排序规则的应用瀑布流排序规则广泛应用于图片展示、商品展示等网页场景中，以下是几个常见的应用场景：1. 图片墙：在图片墙中，可以使用瀑布流排序规则来展示不同尺寸的图片，使得整体布局更加紧凑，同时保持每一列的高度平衡。
这样可以提高用户体验，让用户更加方便地查看和浏览图片。
2. 商品列表：在电商网站的商品列表页中，可以使用瀑布流排序规则来展示不同商品的缩略图和基本信息。
通过动态调整元素位置，可以实现更好的页面展示效果，提高用户的购物体验。
3. 信息流：在社交媒体平台和新闻资讯网站中，通常会使用瀑布流排序规则来展示用户发布的动态和新闻信息。
通过合理的排列方式，可以让用户更加方便地查看和浏览感兴趣的内容。
三、瀑布流排序规则的优缺点瀑布流排序规则有以下几个优点：1. 美观性：瀑布流排序规则可以使得网页的内容呈现更加有序和美观，提高用户体验。
2. 适应性：瀑布流排序规则可以根据屏幕的大小和内容的宽度来自适应地调整元素的位置，适用于各种设备和屏幕尺寸。
微信小程序瀑布流布局
微信⼩程序瀑布流布局今天做⼩程序的时候，碰到⼀个⽐较常见的需求，就是要瀑布流布局，两列，交错分布，⼤概如下图最终要实现的结果就是如左图所⽰。
不过在微信⼩程序⾥⾯，不能通过JavaScript来直接操作dome，所以⼀些常⽤的⽅法在这⾥都没有办法⽤了。
这让笔者⾮常着急，因为项⽬⽐较赶，不能因为这种低级的布局问题拖慢了进度。
百度了半天，发现了css3的column这个属性，但是最后实现出来的⽅法就如右图所⽰，这不符合需求，需求是两列，从左到右进⾏排列的，⼤概就像⼩红书APP那种瀑布流布局最后笔者终于找到⼀种⾮常诡异的⽅法，哈哈，废话不多说，直接上代码<view class="content"><view class="left"><block wx:for="{{note}}" wx:key=""><template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template> </block></view><view class="right"><block wx:for="{{note}}" wx:key=""><template is="item" data="{{...item}}" wx:if="{{index%2==1}}"></template> </block></view></view>》<!-- 下⾯是⼀个模块 --><template name="item"><view class="item"><image class="item-img" src="{{url}}" mode="widthFix"></image><view class="item-title-box"><navigator url="url" class="item-title">{{title}}</navigator><image class="arrow" src="../../image/arrow.png"></image></view><view class="name"><image class="item-ava" src="{{avatar}}"></image><text class="name-title">{{name}}</text><view class="heart_"><image class="heart" src="../../image/heart.png"></image><text>{{heart_num}}</text></view></view></view></template>CSS样式.content{margin: 0 20rpx;text-align: justify;}.item{background-color: #fff;margin: 1%;margin-bottom: 20rpx;display: inline-block;}.item-ava{width: 40rpx;height: 40rpx;border-radius: 20rpx;}.heart{width: 30rpx;height: 26rpx;margin-right: 8rpx;}.heart_{display: flex;align-items: center;}.item-img{width: 100%}.item-title{font-size: 24rpx;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;font-family: 'PingFang SC-Medium';color: #1e1e1e;margin: 15rpx;line-height: 27rpx;}.item .name{display: flex;padding: 0 15rpx;margin-top: 20rpx;padding-bottom: 10rpx;align-items: center;font-size: 22rpx;color: #1e1e1e;font-family: 'PingFang SC-Medium';}.name image{flex: 0 0 30rpx;}.item-title-box{display: flex;position: relative;}.name-title{flex: 1;margin-left: 18rpx;margin-right: 20rpx;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}.name text:last-child{flex: 0 0 30rpx;color: #c4c4c4;text-decoration: underline;line-height: 10rpx;}.left,.right{display: inline-block;vertical-align: top;width: 49%;}.right{float: right;}js数据var app = getApp()Page({data: {note:[{name: '⼤脸猫爱吃鱼⼤脸猫爱吃鱼⼤脸猫爱吃鱼⼤脸猫爱吃鱼⼤脸猫爱吃鱼',heart_num: '1',title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: '/it/u=121654667,1482133440&fm=72',avatar: '/it/u=349345436,3394162868&fm=26&gp=0.jpg'},{name: '⼤脸猫爱吃鱼',heart_num: '2',title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: '/it/u=1417732605,3777474040&fm=26&gp=0.jpg',avatar: '/it/u=349345436,3394162868&fm=26&gp=0.jpg'},{name: '⼤脸猫爱吃鱼',heart_num: '3',title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: '/it/u=1417732605,3777474040&fm=26&gp=0.jpg',avatar: '/it/u=349345436,3394162868&fm=26&gp=0.jpg'}, {name: '⼤脸猫爱吃鱼',heart_num: '4',title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: '/it/u=121654667,1482133440&fm=72',avatar: '/it/u=349345436,3394162868&fm=26&gp=0.jpg'},{name: '⼤脸猫爱吃鱼',heart_num: '5',title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: '/it/u=121654667,1482133440&fm=72',avatar: '/it/u=349345436,3394162868&fm=26&gp=0.jpg'},{name: '⼤脸猫爱吃鱼',heart_num: '6',title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识', url: '/it/u=1417732605,3777474040&fm=26&gp=0.jpg',avatar: '/it/u=349345436,3394162868&fm=26&gp=0.jpg'},{name: '⼤脸猫爱吃鱼',heart_num: '7',title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',url: '/it/u=2748975304,2710656664&fm=26&gp=0.jpg',avatar: '/it/u=349345436,3394162868&fm=26&gp=0.jpg'}, {name: '⼤脸猫爱吃鱼',heart_num: '8',title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',url: '/it/u=1561660534,130168102&fm=26&gp=0.jpg',avatar: '/it/u=349345436,3394162868&fm=26&gp=0.jpg'}]}})最后出来的效果哈哈，⼤概的思路就是，直接定义两列等宽的view，然后两列都加载相同的数据敲⿊板！！！记重点啦！！！ wx:if="{{index%2==1}}" 这⾥，⽤if来辨别是奇数还是偶数，两边加载相反的，哈哈，这样就成功实现瀑布流了，是不是很简单？。
响应式网页设计中常见的瀑布流布局技巧
响应式网页设计中常见的瀑布流布局技巧在如今互联网快速发展的时代，响应式网页设计被越来越多的网站采用。
而在响应式网页设计中，瀑布流布局是非常常见的一种布局技巧。
它可以实现独特的页面展示效果，同时适应用户不同屏幕的设备，提供更好的用户体验。
本文将讨论瀑布流布局的一些常见技巧和应用。
瀑布流布局的基本原理是以不同大小和高度的内容块按照规则排列，从而呈现出瀑布般的效果。
一般来说，瀑布流布局中的每个内容块都有独立的宽度和高度，并且会根据屏幕尺寸自动适应。
这种设计方式可以有效地展示不同类型的信息，从图片、视频到文本，使页面更具吸引力。
要实现一个好的瀑布流布局，首先要考虑到页面内容的多样性。
不同大小和高度的内容块将使页面更有趣。
例如，在一个图片展示网站上，通过设置不同尺寸和比例的图片展示，可以给用户带来更好的视觉体验。
同时，可以在页面中插入一些文本块，以增加页面内容的多样性。
其次，瀑布流布局在响应式网页设计中具有很好的适应性。
无论是在大屏幕还是小屏幕上，瀑布流布局都可以根据屏幕尺寸自动调整内容的大小和排列方式。
这种适应性可以使网页在不同设备上都能够呈现出最佳的效果。
例如，在手机上观看瀑布流布局的网页时，可以通过缩小图片和文本块的大小，使得页面更加舒适易读。
另外，瀑布流布局还可以通过动态加载的方式来加载更多的内容，从而提供更好的用户体验。
当用户滚动页面到底部时，可以自动加载更多的内容，避免了用户翻页的繁琐操作。
这种方式可以帮助用户快速浏览大量的信息，提高用户的粘性和留存率。
在实际应用中，瀑布流布局还可以与其他布局方式相结合，以实现更好的效果。
例如，可以将瀑布流布局与网格布局结合，使页面更加丰富多样。
在一个电商网站上，可以使用瀑布流布局来展示商品的图片和信息，同时使用网格布局来显示商品的价格和购买按钮，提供更好的用户购物体验。
除了以上提到的一些技巧和应用，瀑布流布局还可以通过一些细节上的处理来提升页面的质量。
例如，可以设置每个内容块之间的间距，让页面更加整洁有序。
谈谈实现瀑布流布局的几种思路
谈谈实现瀑布流布局的⼏种思路最近遇到这么⼀个需求，需要在⼿机上做⼀个两列的瀑布流布局，后来就把这个问题研究了⼀下，做个记录。
⼀般来讲，这种布局可以分为两种情况：1. 图⽚的数量是⼀定的，不需要页⾯滚动到底部时，再动态加载图⽚，只需要将图⽚排成若⼲列2. 图⽚的数量的不定的，页⾯触底时，需要从远程加载图⽚。
前者使⽤css的⽅法即可解决，后者则需要js来帮忙。
css解法⼀、CSS多列布局当我们展⽰的图⽚数量⼀定时，可以优先采⽤css解法。
其中⼀种⽅法是借助css的多栏布局：得到的效果如下：⼆、flex布局flex布局同样可以做到这⼀点，诀窍在于将flex-direction设为column；但是相对于多列布局，需要根据瀑布流的列数，计算⼀个合适的容器⾼度，不然可能会导致多出⼀⾏。
如果你在下⾯的demo 中，看到了4列，不要怀疑，就是我计算的容器⾼度不合适导致的。
js解法当图⽚需要动态插⼊时，上⾯的两种⽅法就不合适了，因为他们本质上是将图⽚按照纵向进⾏排列的。
图⽚动态插⼊时通常我们希望图⽚是按横向插⼊到容器中的。
这时候就需要js来帮忙了。
⾸先，我们看看瀑布流和背包问题的关系。
瀑布流的基本思路是将⼀堆图⽚放到若⼲列中，列与列之间的⾼度⽐较均匀，⽽不会相差太⼤。
假如我们要分成两列，那么，问题就变成了，从 n 张图⽚中挑出 m 张，使这 m 张图⽚的总⾼度尽量接近 n 张图⽚总⾼度的 1 / 2。
于是这就变成了⼀个01背包问题背包问题是啥这⾥不做展开，说⽩了是将⼀个复杂的问题分解为⼏个简单的问题，⼤佬们讲的都⽐我好，⽹上也有各个语⾔版本的实现，不太了解的同学可以查看上⾯的链接。
这⾥直接放⼀个函数有了这个解法之后，我们也就不难写出⼀个瀑布流布局。
具体思路是：假设我们要做⼀个3列的瀑布流布局，那么可以不断从图⽚数组中选出⼀组图⽚，使图⽚的⾼度接近总⾼度的1/3，最终得到3组图⽚。
下⾯是⼀个代码⽚段下⾯这个demo就是按上⾯的思路实现的，可以拖动下⾯的滑块来改变列数，观察底部的间隙。
瀑布流原理
瀑布流原理
瀑布流原理是一种网页布局方式，也被称为无限滚动或无限加载。
它的设计灵感来自于大自然中的瀑布，瀑布流的布局方式能够让网页内容以不间断、动态的方式展示在用户眼前。
瀑布流布局的特点是将网页内容按照一定的规则排列呈现，通常是按照从上到下、从左到右的顺序进行展示。
每个内容单元的大小可以不同，但宽度往往相同，这使得瀑布流看起来更加整齐美观。
实现瀑布流布局的关键是动态加载内容。
当用户滚动到页面底部时，新的内容会自动加载并补充在页面上。
这个过程是通过JavaScript等前端技术实现的。
瀑布流布局的优点是能够节约页面空间，使得更多的内容能够同时展示在页面上，提升用户体验。
瀑布流布局的应用较为广泛，经常可以在新闻网站、图片展示网站、商品展示网站等地方看到。
它将网页内容以视觉冲击力强、流畅的方式呈现给用户，吸引用户的注意力，增加用户浏览和停留的时间。
瀑布流布局的实现原理较为复杂，需要通过动态计算、监听用户滚动等方式来实现。
同时，为了保证性能，瀑布流布局的内容加载通常采用异步加载的方式，避免一次性加载大量内容而导致页面卡顿。
总的来说，瀑布流布局是一种以动态加载内容方式展示网页内
容的布局方式。
它通过优化页面空间利用、提升用户体验等方式吸引用户，是现代网页设计中常用的布局方式之一。
响应式网页设计中常见的瀑布流布局技巧(六)
响应式网页设计中常见的瀑布流布局技巧现如今，随着移动设备的普及和互联网的发展，越来越多的用户访问网页时使用手机或平板电脑。
因此，设计一个能够适配不同屏幕尺寸的响应式网页，成为了至关重要的任务。
在响应式网页设计中，瀑布流布局广泛应用于展示图片、商品或文章等内容。
本文将介绍一些常见的瀑布流布局技巧，以帮助开发者更好地设计和实现响应式网页。
一、动态加载瀑布流布局最大的特点就是能够自适应不同尺寸的屏幕，并根据内容自动调整列数和位置。
而动态加载则是瀑布流布局的核心技巧之一。
在传统的网页设计中，当用户向下滚动页面时，需要手动点击“加载更多”按钮或者使用分页功能来获取更多的内容。
但在瀑布流布局中，可以通过JavaScript代码实现自动动态加载，使得用户在滚动页面时能够无缝获取更多的内容，提升用户体验。
二、图片处理在瀑布流布局中，图片通常是主要的展示内容。
为了让图片在不同尺寸的设备上显示良好，需要进行适当的图片处理。
一种常见的处理方式是使用JavaScript库，如Masonry或Isotope，来调整图片的尺寸和位置。
这样可以避免出现图片错位或者留下空白的情况。
另一种方式是使用CSS的媒体查询功能，根据不同设备的屏幕宽度，为图片设置不同的样式。
通过这些处理方式，可以保证图片在不同设备上都能够呈现出最佳的效果。
三、无限滚动为了提升用户的浏览体验，瀑布流布局往往会采用无限滚动的功能。
无限滚动是指当用户滚动到页面底部时，自动加载更多的内容，实现无缝的浏览。
这种功能的实现也是通过JavaScript代码来完成的。
当用户将页面滚动到底部时，触发一个事件，通过AJAX或其他技术，异步加载更多的数据，并插入到已有的内容中。
这样用户就可以不断地向下滚动，获得更多的内容，避免了翻页的麻烦。
四、平衡列高在瀑布流布局中，由于每列的宽度是自适应的，每一列的高度往往会有所不同。
为了使整体布局更加美观，需要保持每一列的高度相对平衡。
一种简单的方法是使用JavaScript库中提供的平衡列高的功能。
响应式网页设计中常见的瀑布流布局技巧(七)
响应式网页设计中常见的瀑布流布局技巧随着手机和平板电脑的普及，越来越多的人习惯了通过移动设备浏览网页。
因此，响应式网页设计成为了现代网页设计的重要一环。
在响应式设计中，瀑布流布局是一种常见且有效的布局方式。
本文将探讨瀑布流布局的常见技巧，以帮助网页设计师更好地应用于响应式设计中。
1. 图片瀑布流图片瀑布流是瀑布流布局中最常见的形式之一。
它通过将图片按照不同的高度依次排列，形成像瀑布流般的效果。
在响应式设计中，使用CSS的列布局可以实现图片瀑布流。
通过设置不同的列数和图片高度，可以使得图片在不同屏幕尺寸下呈现出统一而流畅的布局。
此外，还可以使用JavaScript库，如Masonry或Isotope，来实现图片的动态排列和过渡效果，提升用户的浏览体验。
2. 文章瀑布流除了图片，文章也可以采用瀑布流布局。
在响应式设计中，文章瀑布流常常被用于博客和新闻网站等需要展示大量内容的页面。
通过将文章按照不同的高度和宽度排列，可以在有限的空间内展示更多的文章，同时保持页面的美观和易读性。
与图片瀑布流不同，文章瀑布流更加注重文字的排版和布局。
合理使用标题、摘要、引文和分段等元素，可以使得文章在瀑布流布局下更加清晰和易读。
3. 动态加载由于移动设备的屏幕尺寸有限，显示所有内容可能会导致页面过长，用户需要频繁滚动屏幕才能浏览到想要的信息。
为了解决这个问题，动态加载是瀑布流布局中的一个重要技巧。
通过使用JavaScript 和Ajax等技术，可以实现当用户滚动到页面底部时，自动加载更多的内容，以保持页面整洁和流畅。
这种方式不仅可以提升用户的浏览体验，还可以减轻服务器的负荷，提高网页的性能。
4. 响应式布局在响应式设计中，布局的灵活性是至关重要的。
瀑布流布局可以根据不同的屏幕尺寸和方向进行自适应调整，以适应不同的设备和浏览器。
通过使用CSS媒体查询和响应式框架，如Bootstrap或Foundation，可以实现瀑布流布局在不同设备上的适配和优化。
瀑布流布局
瀑布流布局瀑布流又称瀑布流式布局，是一种多列等宽不等高的一种页面布局方式。
视觉表现为参差不齐的多栏布局。
随着页面滚动条向下滚动，这种布局会不断加载数据并附加至当前的尾部。
是一种多列等宽不等高的一种页面布局方式，用于图片比较复杂，图片尺寸比较复杂时可以使用的一种展示方式，这种展示方式可以使页面比较美观，让人有种错落有致的感觉。
瀑布流是一种允许用户不断往下滑动，页面自动刷新呈现内容的交互形式。
瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。
沉浸式可以让用户更快、更好地进入视频情境之中，而忘记真实世界的情境，因为没有其它视频信息的干扰，能够让用户只专注于当前的视频。
一. 瀑布流布局的原理？瀑布流布局的特点是等宽不等高。
为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。
父元素设置为相对定位，图片所在元素设置为绝对定位。
然后通过设置top 值和left 值定位每个元素。
二、瀑布流的优点1、对于触屏设备非常友好，通过向上滑动浏览2、因为瀑布流有吸引力，瀑布流会在它的页面底部给你不断地加载新的暗示信息，滑动的时候会不停的出现新的东西，通过给出不完整的视觉图片去吸引你的好奇心，让你停不下来想要不断的向下探索。
采用这种方案的产品，往往可以通过瀑布流加强用户的停留时间，提高用户的使用粘度。
3、用户一扫而过的快速阅读模式，短时间内可以看到大量的信息，瀑布流的懒加载模式，又避免点击的的翻页操作，在最小的操作成本下能够获得最多的内容体验，瀑布流的视觉方式，用户浏览时的观赏和思维不容易被打断，让人容易沉浸其中，留存更容易。
4、另外瀑布流的主要特质就是：定宽而不定高，这样的页面设计区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动来缓解视觉的疲劳。
不仅节省空间，而且外表美观，更有艺术性。
三、瀑布流的缺点1、用户无法了解内容总长度，对内容没有宏观掌控。
什么是瀑布流
什么是瀑布流瀑布流⼜称瀑布流式布局，是⽐较流⾏的⼀种⽹站页⾯布局⽅式。
视觉表现为参差不齐的多栏布局，最早采⽤此布局的是⽹站是 Pinterest，后逐渐在国内流⾏。
瀑布流布局效果即多⾏等宽元素排列，后⾯的元素依次添加到其后，等宽不等⾼，根据图⽚原⽐例缩放直⾄宽度达到我们的要求，依次按照规则放⼊指定位置。
那么规则是什么呢？下⾯通过图解来分析⼀下瀑布流的算法。
图解瀑布流算法当第⼀排排满⾜够多的等宽图⽚时（如下图情况），⾃然⽽然的考虑到之后放置的图⽚会往下⾯排放。
那么第六张图⽚，放置在什么位置呢？是下图的位置么？我们通过瀑布流算法实验得到，后⾯紧跟的第六张图⽚的位置应该是这个位置。
为什么呢？因为放置它之前，这⼀列的⾼度为所有列中最⼩，所以会放置在这个地⽅。
所以我们知道了，如果再继续放置下去，第七张图⽚应该是这个位置，对吗？通过瀑布流算法实验得出位置正确。
看懂这个图⽰应该就能理解了瀑布流的原理算法。
JS 实现代码这⾥使⽤了jQuery<script src="https:///jquery/1.12.4/jquery.js"></script><script>var colCount //定义列数var colHeightArry= [] //定义列⾼度数组var imgWidth = $('.waterfall img').outerWidth(true) //单张图⽚的宽度colCount = parseInt($('.waterfall').width()/imgWidth) //计算出列数for(var i = 0 ; i < colCount; i ++){colHeightArry[i] = 0}//[0,0,0]$('.waterfall img').on('load',function(){var minValue = colHeightArry[0] //定义最⼩的⾼度var minIndex = 0 //定义最⼩⾼度的下标for(var i = 0 ; i < colCount; i ++){if(colHeightArry[i] < minValue){ //如果最⼩⾼度组数中的值⼩于最⼩值minValue = colHeightArry[i] //那么认为最⼩⾼度数组中的值是真正的最⼩值 minIndex = i //最⼩下标为当前下标}}$(this).css({left: minIndex * imgWidth,top: minValue})colHeightArry[minIndex] += $(this).outerHeight(true)})//当窗⼝⼤⼩重置之后，重新执⾏$(window).on('resize',function(){reset()})//当窗⼝加载完毕，执⾏瀑布流$(window).on('load',function(){reset()})//定义reset函数function reset(){var colHeightArry= []colCount = parseInt($('.waterfall').width()/imgWidth)for(var i = 0 ; i < colCount; i ++){colHeightArry[i] = 0}$('.waterfall img').each(function(){var minValue = colHeightArry[0]var minIndex = 0for(var i = 0 ; i < colCount; i ++){if(colHeightArry[i] < minValue){minValue = colHeightArry[i]minIndex = i}}$(this).css({left: minIndex * imgWidth,top: minValue})colHeightArry[minIndex] += $(this).outerHeight(true)})}</script>Demo 演⽰总结瀑布流布局原理设置图⽚宽度⼀致根据浏览器宽度以及每列宽度计算出列表个数，列表默认0当图⽚加载完成，所有图⽚依次放置在最⼩的列数下⾯⽗容器⾼度取列表数组的最⼤值实战相关瀑布流（waterfall），每刷新⼀次，展⽰8条记录，⼿机客户端上多⽤。
瀑布流布局的开发实践
定位的方式实现起来其实也简单，在窗口 resize 时，也可以方便的对单元格进行重新计算排序。
但是计算的频率比较高，如果要做无限的加载数据，以及 resize 时的自适应排列，那么性能就是一个必须要重视的问题。
如果没有任何优化手段，成百上千个单元格本身就很耗资源，resize 时再全部重新计算一遍，可以想象浏览器在这个时候一定很吃力，必然会有浏览器假死的情况。
多列浮动的布局方式再来看看多列浮动布局的实现方式，多个单元格组成一列，无需对单个的单元格进行定位的计算，然后对整列进行浮动，如下图：当然，这种布局方式在无限加载和 resize 时的自适应面前，面对着同样的问题。
自适应窗口先说 resize 时的布局自适应，虽然浮动布局的计算没有定位那么方便，但要实现自适应的布局还是可以的。
比如原来有 4 列，resize 时页面宽度变小了，只能放 3 列了，单元格的总数是不变的，数据的顺序也是固定的，那么只有把原来 4 列里面的单元格全部清空，按照数据的顺序重新计算排序，依次添加到 3 列中。
需要注意的是清空的时候并不是把单元格的 DOM 元素给删除掉，而是从DOM 树提取出来存放在一个文档碎片中，这样就避免了每次都要去创建单元格的 DOM 元素，节省了创建时的性能开销，说得通俗点就是离线操作。
无限加载的挑战浏览器中运行的 WEB 程序并不能像桌面软件那样会有足够多的 CPU 和内存去使用。
当网页中的DOM 元素的数量呈指数倍的增长，那么其占用的内存也势必会成正比的增长，每个 DOM 元素都会有性能开销，只是通常情况下 DOM 的数量并没有达到需要注意型性能的那个阙值。
无限加载的瀑布流就必须要注意这种由于 DOM 数量庞大而引发出来的性能问题。
不能抱着侥幸的心理去认为用户可能滚动不了多长就会跳出。
此次做的瀑布流布局的项目压根就没有内页，都是浮层直接展示大图，虽说在一定程度上方便了用户，但同时也给浏览器端很大的性能压力。
如何运用瀑布流布局提升网页的视觉冲击力
如何运用瀑布流布局提升网页的视觉冲击力在当今互联网时代，网页设计作为一门独特的艺术形式变得越来越重要。
一个吸引用户并引发共鸣的网页设计是成功的关键之一。
瀑布流布局，一种常见的网页布局方式，以其不规则、流动的视觉效果而备受推崇。
在本文中，我们将探讨如何运用瀑布流布局来提升网页的视觉冲击力，为用户带来更好的浏览体验。
1. 瀑布流布局简介瀑布流布局，又称瀑布式布局，是一种多栏无序的排列方式，犹如瀑布一般纵向倾泻而下，每一栏之间没有严格的对齐规则。
这种布局方式能够呈现出鲜明的视觉效果，吸引用户的眼球并增强网页的视觉冲击力。
2. 利用瀑布流布局营造视觉层次感瀑布流布局的特点之一是多栏排列，这为设计师提供了展示多元内容的机会。
通过合理安排不同大小、形状、颜色的元素在各个栏目中的分布，设计师可以有效地营造出层次感，使页面显得更为丰富和立体。
例如，可以在某一栏中放置一张大尺寸高清图片，配合其他栏目中较小的文字和图片，形成视觉上的对比，使网页更加生动有趣。
3. 创造不规则排列的美感瀑布流布局的不规则排列也是其独特之处。
相比传统的对齐排列方式，瀑布流布局的元素之间更有自由度，使得网页设计更具创意和变化。
通过合理安排各个元素的位置和大小，设计师可以构建起一个丰富多样的网页，有助于吸引用户的眼球并提高用户留存率。
4. 引导用户的视线流动优秀的网页设计需要能够引导用户的视线流动，使用户能够融入其中。
瀑布流布局可以通过多列布局的特点来引导用户的视线流动，使其将注意力集中在重要的内容上。
例如，将重要的信息放置在瀑布流布局的上方或左侧，使其更易于被用户注意到，从而提升网页的视觉冲击力。
5. 高质量图片的应用瀑布流布局非常适用于展示图片或多媒体内容。
高质量的图片可以增加网页的视觉冲击力。
设计师可以利用瀑布流布局的不规则排列特性，将高清大图与其他元素巧妙地结合，呈现出更加精彩的网页效果。
然而，在使用大量图片的同时，也要注意页面加载速度的问题，避免用户因为加载时间过长而失去耐心。
响应式网页设计中常见的瀑布流布局技巧(三)
响应式网页设计中常见的瀑布流布局技巧随着移动设备的普及和用户体验的要求不断提高，响应式网页设计已成为现代网页设计的重要方向。
而在响应式网页设计中，瀑布流布局是一种非常常见且受欢迎的设计技巧。
一、瀑布流布局的优点：瀑布流布局以其独特的视觉效果和丰富的信息展示方式备受网页设计师的青睐。
其主要优点有以下几点：1. 空间利用率高：瀑布流布局能充分利用页面空间，将不同大小的元素自然地铺展开来，使页面看起来更加丰富和生动。
2. 提高用户体验：瀑布流布局以一种流动的、连贯的形式展示内容，使用户能够快速浏览和获取所需信息，提高了用户的阅读和浏览效率。
3. 强调视觉冲击力：不同大小的元素在瀑布流布局中交相辉映，形成独特的视觉冲击力，吸引用户的注意力。
4. 适应不同屏幕尺寸：由于瀑布流布局的流动性和自适应性，它能适应各种屏幕尺寸，使得网页在不同设备上都能呈现出最佳的效果。
二、瀑布流布局的常见技巧：在设计响应式网页时采用瀑布流布局需要注意以下几个关键方面：1. 元素的大小和位置：瀑布流布局中元素的大小和位置是非常重要的。
为了达到瀑布流的效果，可以设置不同大小和高度的元素，使页面看起来活泼且富有层次感。
同时，合理调整元素的位置，使其互相衔接，不出现空白或重叠的情况。
2. 图片的加载和优化：瀑布流布局通常会展示大量的图片，为了保证页面的加载速度，需要对图片进行优化和懒加载。
通过压缩图片大小、使用适当的格式（如JPEG、WebP等），以及使用懒加载技术（即在图片露出视口时再进行加载），可以提升网页的加载速度和用户体验。
3. 响应式布局的设计：瀑布流布局需要能够适应不同屏幕尺寸的设备，因此需要采用响应式布局来实现。
通过使用媒体查询、弹性布局和流式布局等技术，可以使网页在不同设备上自动适配并呈现最佳的布局效果。
4. 内容的分类和排序：在瀑布流布局中，为了使内容更易于浏览和查找，需要合理地对内容进行分类和排序。
可以根据内容的类型、标签或其他属性，在页面上对元素进行分类和分组，并优化排序方式，以提供更好的用户体验。
3种方式实现瀑布流布局小结
3种⽅式实现瀑布流布局⼩结前⾔今天逛闲鱼的时候观察到每⼀⾏的⾼度不是相同的，经了解才知道原来这是⼀种瀑布流布局，感觉挺有意思，于是决定研究⼀下，在⽹上也找了⼀些⽅案，实现瀑布流⼤概有3种⽅式。
⼀、JS 实现瀑布流思路分析瀑布流布局的特点是等宽不等⾼。
为了让最后⼀⾏的差距最⼩，从第⼆⾏开始，需要将图⽚放在第⼀⾏最矮的图⽚下⾯，以此类推。
⽗元素设置为相对定位，图⽚所在元素设置为绝对定位。
然后通过设置 top 值和 left 值定位每个元素。
代码实现<!DOCTYPE html><html><head><style>.box {width: 100%;position:relative;}.item {position: absolute;}.item img{width: 100%;height:100%;}</style></head><body><div class="box"><div class="item"><img src="banner.jpg" alt="" /></div><div class="item"><img src="show.jpg" alt="" /></div><div class="item"><img src="cloth.jpg" alt="" /></div><div class="item"><img src="banner.jpg" alt="" /></div><div class="item"><img src="show.jpg" alt="" /></div><div class="item"><img src="cloth.jpg" alt="" /></div><div class="item"><img src="banner.jpg" alt="" /></div><div class="item"><img src="show.jpg" alt="" /></div><div class="item"><img src="cloth.jpg" alt="" /></div><div class="item"><img src="show.jpg" alt="" /></div><div class="item"><img src="cloth.jpg" alt="" /></div><div class="item"><img src="banner.jpg" alt="" /></div></div></body><script src="jquery.min.js"></script><script>function waterFall() {// 1 确定图⽚的宽度 - 滚动条宽度var pageWidth = getClient().width-8;var columns = 3; //3列var itemWidth = parseInt(pageWidth/columns); //得到item的宽度$(".item").width(itemWidth); //设置到item的宽度var arr = [];$(".box .item").each(function(i){var height = $(this).find("img").height();if (i < columns) {// 2 第⼀⾏按序布局$(this).css({top:0,left:(itemWidth) * i+20*i,});//将⾏⾼push到数组arr.push(height);} else {// 其他⾏// 3 找到数组中最⼩⾼度和它的索引var minHeight = arr[0];var index = 0;for (var j = 0; j < arr.length; j++) {if (minHeight > arr[j]) {minHeight = arr[j];index = j;}}// 4 设置下⼀⾏的第⼀个盒⼦位置// top值就是最⼩列的⾼度$(this).css({top:arr[index]+30,//设置30的距离left:$(".box .item").eq(index).css("left")});// 5 修改最⼩列的⾼度// 最⼩列的⾼度 = 当前⾃⼰的⾼度 + 拼接过来的⾼度arr[index] = arr[index] + height+30;//设置30的距离}});}//clientWidth 处理兼容性function getClient() {return {width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight }}// 页⾯尺⼨改变时实时触发window.onresize = function() {//重新定义瀑布流waterFall();};//初始化window.onload = function(){//实现瀑布流waterFall();}</script></html>效果如下⼆、column 多⾏布局实现瀑布流思路分析：column 实现瀑布流主要依赖两个属性。
Axure中的瀑布流布局与卡片式设计技巧分享
Axure中的瀑布流布局与卡片式设计技巧分享在当今互联网时代，网页设计已经成为了一门独特的艺术形式。
为了吸引用户的注意力和提升用户体验，设计师们不断探索新的设计技巧和布局方式。
在这篇文章中，我们将探讨Axure中的瀑布流布局和卡片式设计技巧，并分享一些实用的设计方法。
瀑布流布局是一种以瀑布流的形式展示内容的网页设计方式。
它的特点是将内容以不规则的瀑布流排列，每个内容块的大小和位置都不一样。
这种布局方式可以有效地利用页面空间，让用户在浏览网页时感到新鲜和有趣。
在Axure中实现瀑布流布局并不困难。
首先，我们需要创建一个重复区域，用于容纳多个内容块。
然后，我们可以在该重复区域中添加多个内容块，每个内容块的大小和位置可以通过设置动态面板的大小和位置来实现。
最后，我们可以使用Axure的动态面板交互功能，为每个内容块添加点击事件，以便用户可以与之交互。
除了瀑布流布局，卡片式设计也是一种常见的网页布局方式。
卡片式设计将内容以卡片的形式呈现，每个卡片代表一个独立的内容单元。
这种布局方式可以使网页看起来更加整洁和有序，同时也方便用户快速浏览和选择感兴趣的内容。
在Axure中实现卡片式设计同样也很简单。
我们可以使用动态面板来创建每个卡片，并设置卡片的大小和位置。
然后，我们可以在每个卡片中添加所需的内容，如文字、图像或其他交互元素。
最后，我们可以使用Axure的交互功能，为每个卡片添加点击事件或其他交互效果，以提升用户体验。
除了基本的瀑布流布局和卡片式设计，Axure还提供了许多其他的设计技巧和功能，可以帮助设计师们更好地实现他们的创意。
例如，Axure的交互功能可以帮助设计师们创建各种交互效果，如按钮点击、页面切换和弹出窗口等。
此外，Axure还支持自定义样式和主题，可以让设计师们根据自己的需求和品牌形象来设计网页。
在使用Axure进行网页设计时，我们还需要注意一些细节和技巧。
首先，我们应该保持页面的简洁和易读性，避免过多的文字和图像。
响应式网页设计中常见的瀑布流布局技巧(四)
响应式网页设计中常见的瀑布流布局技巧随着移动设备的普及，越来越多的用户习惯于通过手机或平板电脑访问网页。
这就导致了一个问题，即如何在不同尺寸的屏幕上有效地展示信息，并提供良好的用户体验。
响应式网页设计应运而生，它采用了瀑布流布局技巧，使得网页可以自适应不同的屏幕尺寸。
瀑布流布局是一种流式布局形式，它通过动态排列和调整网页元素的位置，使得网页在不同设备上能够自适应。
下面将介绍一些响应式网页设计中常见的瀑布流布局技巧。
1. 媒体查询媒体查询是响应式网页设计的基础。
通过媒体查询，可以针对不同的屏幕尺寸应用不同的CSS样式，从而使得网页能够适应不同的设备。
例如，可以通过媒体查询设置不同尺寸的图片、字体和布局，以适应手机、平板和桌面电脑。
2. 图片延迟加载为了提高网页的加载速度，可以使用图片延迟加载技术。
瀑布流布局通常会展示大量的图片，而这些图片如果一次性加载可能会导致页面加载缓慢。
图片延迟加载可以使得网页在初次加载时只加载可见区域的图片，当用户滚动页面时再加载其他区域的图片，从而提高页面的加载速度。
3. 瀑布流瀑布排序瀑布流瀑布排序是瀑布流布局中常用的一种技巧。
它通过将网页元素按照一定的顺序排列，以达到平衡和美观的效果。
通常，会按照从上到下、从左到右的方式依次排列元素，使得每个元素在视觉上都有一个自然的流动感。
4. 自适应列数瀑布流布局的特点之一是不固定的列数。
在响应式网页设计中，可以根据设备的屏幕尺寸和分辨率，动态调整瀑布流中的列数。
例如，在大屏幕上可以显示多列，而在小屏幕上则可以减少列数以适应屏幕尺寸。
5. 流式布局流式布局是瀑布流布局的一个关键要素。
通过使用百分比单位而不是像素单位，可以使得网页元素能够根据屏幕尺寸自动调整大小。
这样一来，网页会以流动的方式展示，并且元素的位置会根据屏幕尺寸动态调整，从而展现出更好的响应式效果。
总结起来，响应式网页设计中的瀑布流布局技巧是通过媒体查询、图片延迟加载、瀑布流瀑布排序、自适应列数和流式布局等方式实现的。
瀑布流实现的基本原理
瀑布流实现的基本原理瀑布流是一种常见的网页布局方式，它的基本原理是将页面上的元素按照一定规则排列，形成类似瀑布流水般的视觉效果。
瀑布流的实现主要依靠以下几个关键原理：1.等宽布局：瀑布流中的每一列元素宽度相等，这样可以使得元素在纵向排列时具备水平对齐的效果。
2.不固定高度：瀑布流中的每一个元素的高度是不固定的，根据其内部内容的高度来决定。
这样可以使得不同高度的元素可以完美地堆叠在一起，形成瀑布流的效果。
3.动态排列：当新的元素被添加到瀑布流中时，会根据当前每一列的高度情况，选择高度最小的列，并将新元素放置在该列的下方。
这样可以实现元素的动态排列，保证整个布局的平衡性。
实现瀑布流布局的具体步骤如下：1.设置容器：确定一个容器作为瀑布流的布局区域，设置该容器为相对定位，并定义容器的宽度。
2.创建列：根据容器的宽度和单个元素的宽度，计算出可以容纳的列数。
创建相应数量的列，并设置宽度和浮动属性。
3.加载元素：从后台获取需要展示的元素数据，使用循环将每个元素依次添加到列中。
在添加之前，可以通过异步加载图片的方式获取图片的高度，并根据该高度计算元素的实际高度。
4.动态排列：在添加元素时，根据每一列的高度情况，选择高度最小的列，将新元素放置在该列的下方。
每次添加元素后都更新列的高度。
通过以上步骤，就可以实现瀑布流的基本布局效果。
当浏览器窗口大小改变或添加新元素时，可以通过监听事件来重新计算每一列的高度，从而保证整个布局的稳定性和适应性。
瀑布流布局在展示图片、商品等不同高度的元素时更加灵活，可以提升用户体验。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
return { width: window.innerWidth, height: window.innerHeight
} }
function picFall(col) {
let bodyWidth = getClient().width //获取body的宽度
let itemWidth = parseInt(bodyWidth/col) - 10 //得到item的宽度
let arr = []
//用来存放2列的高度
$(".item").width(itemWidth) //设置到item的宽度 let picnum = $(".box .item").li < picnum; i++) { var height = $(".box .item").eq(i).find("img").height() + $(".box
<style> .box { position:relative; } .item { position: absolute; } .item img{ width: 100%; height: 100%; }
</style> </head> <body> <div class="box">
<div class="item"> <img src="./4.jpg" alt="" /> <div class="bottom"> <p class="name">爱你一万年</p> <p class="hot">播放量：1872</p> </div>
<div class="bottom"> <p class="name">爱你一万年</p> <p class="hot">播放量：1872</p>
</div> </div> <div class="item">
<img src="./4.jpg" alt="" /> <div class="bottom">
中最小高度和它的下标 let index = arr[0] < arr[1] ? 0 : 1
// 将下一个图片加在两列中高度最小的一列 $(".box .item").eq(i).css({
top: arr[index] + 20, //设置上下两个item 20的距离 left: $(".box .item").eq(index).css("left") })
// 最小高度列的高度 = 当前自己的高度 + 增加的高度
arr[index] = arr[index] + height +20 //设置上下两个item 20的距离
}
}
}
// 页面初始化
window.onload = function(){
picFall(2)
//只支持两列哦
}
</script>
导语： 各个公司在面试前端开发的时候经常会问到一个问题，那就是瀑布流布局，今天教你一招，一分钟学完 瀑布流布局。
这里写目录标题
一，什么是瀑布流布局，具体呈现出来是什么样子？ 1，css实现瀑布流布局 2，js实现瀑布流布局
一，什么是瀑布流布局，具体呈现出来是什么 样子？
效果如下图，怎么实现？这里介绍两种方式（css和js）
</html>
学废了吗？希望老铁们挥挥小手点个赞，给更多人学废瀑布流布局。
} .item img{
width: 100%; height: 100%; } </style> </head> <body> <div class="box"> <div class="itembox"> <div class="item"> <img src="./4.jpg" alt="" /> <div class="bottom"> <p class="name">爱你一万年</p> <p class="hot">播放量：1872</p> </div> </div> <div class="item"> <img src="./6.jpeg" alt="" /> <div class="bottom"> <p class="name">爱你一万年</p> <p class="hot">播放量：1872</p> </div> </div> <div class="item"> <img src="./5.jpg" alt="" /> <div class="bottom"> <p class="name">爱你一万年</p> <p class="hot">播放量：1872</p> </div> </div> <div class="item"> <img src="./7.jpeg" alt="" /> <div class="bottom"> <p class="name">爱你一万年</p> <p class="hot">播放量：1872</p> </div> </div> </div> <div class="itembox"> <div class="item"> <img src="./6.jpeg" alt="" />
.item").eq(i).find(".bottom").height() //计算当前图片的高度 if (i < col) { $(".box .item").eq(i).css({ top: 0, left: (itemWidth) * i + 10 * i + 5 }) arr.push(height) } else { let minHeight = arr[0] < arr[1] ? arr[0] : arr[1] // 找到2个数
</div> <div class="item">
<img src="./6.jpeg" alt="" /> <div class="bottom">
<p class="name">爱你一万年</p> <p class="hot">播放量：1872</p> </div> </div> <div class="item"> <img src="./5.jpg" alt="" /> <div class="bottom"> <p class="name">爱你一万年</p> <p class="hot">播放量：1872</p> </div> </div> <div class="item"> <img src="./7.jpeg" alt="" /> <div class="bottom"> <p class="name">爱你一万年</p> <p class="hot">播放量：1872</p> </div> </div> <div class="item"> <img src="./3.jpg" alt="" /> <div class="bottom"> <p class="name">爱你一万年</p> <p class="hot">播放量：1872</p> </div> </div> <div class="item"> <img src="./6.jpeg" alt="" /> <div class="bottom"> <p class="name">爱你一万年</p> <p class="hot">播放量：1872</p> </div> </div> <div class="item"> <img src="./4.jpg" alt="" /> <div class="bottom"> <p class="name">爱你一万年</p> <p class="hot">播放量：1872</p> </div> </div> </div> </body> <script src="https:///libs/jquery/2.1.4/jquery.min.js"></script> <script> function getClient() {