html瀑布流布局是什么,瀑布流布局图片与css多种实现思路剖析

一、什么是瀑布流布局

瀑布流布局在当下前端网页设计中越来越流行，主要表现形式为上下高度参差不齐的多行布局，往往图片各异大小不等却能够自动适应排成一排按行进行展示，滚动条下拉还不会不断地自动适应加载数据一直加载到网站最底部，布局方式见下图：

瀑布流布局的方式多用在较新颖的图片站点，为了提高用户访问的视觉体验而推出的具有高效吸引力的布局方式，只需要手指滑动一下鼠标滑轮，错落有致的唯美布局便随着滚动的滑轮慢慢呈现。

二、瀑布流布局的原理与实现思路

要想理清瀑布流布局的原理与思路，首先我们要明白其主要特点，该布局方式最主要的特点就是图片的宽度都是保持一致的，只有高度是杂乱无序的，抓住这个特点实现起来还是相对容易的。

掌握了上面的特点之后，我们需要将整个布局的每一列的列宽设置固定不变，利用html+css+js代码实现高度自动适应，列宽固定好以后，当我们插入等宽的图片后会自动按照等宽进行排列图片，图片的高度可以用div盒子布局的margin和padding内外间距实现错落有致瀑布流布局的效果。

假如图片的固定数量是已知的，我们可以直接按照上面的方式排列成若干列即可，只需要html+css样式就能实现，假如图片数量不固定，想要随着鼠标滑轮的滚动慢慢不断的加载，可以使用ajax动态远程加载图片，此种方式需要借助js脚本代码。

三、html+css图片瀑布流布局代码实现

只需要css和html代码就能实现的布局必须保证图片的数量已知并且是静态图片，此方法用到css3中的Multi-columns技术，该技术是CSS3中新增的一种多栏布局，其中，column-count属性控制分栏的数目，column-gap属性设置分栏之间的间隙以及分栏的样式，具体其它相关属性见下图：

html代码：

css样式代码：

css3实现图片瀑布流效果如下：

三、js+jquery实现图片瀑布流布局

此种方式需要借助jquery和js来实现，故需要提前下载好jquery.js文件并引入到网页中，实现具体思路是：查找具有图像高度最小的列，插入该列，然后继续查找具有最小高度的下一列，并不断重复直到图像满为止；

找出每一列与浏览器整体的距离(在左侧还是右侧)有什么用？当您知道列的左侧时，您就会知道在其下方插入图像时如何将图像定位到该列。只要图像的左值与列相同，则图像将被插入到列中。

为了使从第二行开始的最后一行中的间隙最小，请将图像放置在第一行中最短图像的下方，依此类推，父元素设置为相对位置，图像元素设置为绝对位置。然后，通过设置顶部值和左侧值来定位每个元素。

html代码如下：

js和jquery脚本代码如下：

js瀑布流布局效果展示：

四、Vue实现瀑布流布局

vue项目实现瀑布流布局可以结合需求使用vue的v-for属性进行实现，然后结合vue-lazy实现懒加载 ( npm i vue-lazyload –save-dev)的功能也是非常不错的，具体懒加载的代码为：img标签:src换成v-lazy。

其实vue.js 2.x及以上的版本也提供了很多可供使用的插件实现瀑布流布局，比如：vue-grid-layout、vue2-waterfall等自适应的和可拖拽的组件，功能也是非常齐全和强大。

html代码如下：

{{item.u_name}}

{{item.e_intro}}

CSS样式代码：

Vue代码如下：

html瀑布流布局是什么,瀑布流布局图片与css多种实现思路剖析相关推荐

python绘制影像组学训练集、测试集对应的ROC曲线以及瀑布图（rad-score 瀑布图）
python绘制影像组学训练集.测试集对应的ROC曲线以及瀑布图(rad-score 瀑布图) # 所有数据的瀑布图 tagets_all = df['label'] tagets_all = df. ...
【源码分享】用Java写的网页图片、CSS、JavaScript分类下载器
前段时间老师让我们要做一个JavaEE项目,是一个电子商务网站--中国鲜花网,前台模板就用这个网站的,但是用浏览器直接下载来的图片和样式表等文件全在一个文件夹,需要给它批量替换,最要命的是浏览器的这个 ...
html背景图片横屏,CSS背景颜色背景图片居中重复固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...
前端笔记-webpack加载前端资源（图片，css等）
目录基本概念代码与实例基本概念通过在webpack.config.js这个文件中添加module rules进行如下代码: 这里分别是加载vue,以及css,和styl样式和图片 styl用于 ...
filter滤镜实现img图片的CSS蒙版效果、模糊效果
文章目录 ```filter滤镜```实现```img图片```的CSS```蒙版效果.模糊效果``` 1. 效果图 2.代码实例注意: 3.兼容性对比 filter滤镜实现img图片的CSS蒙版效 ...
html css 如何将图片作为背景,CSS背景图片和HTML中的img标签
背景图片: 该图片是218*170 css内容: div{ width: 100px; height: 100px; background: url(img/1.jpg); border: 2px s ...
如何实现APP左右滑动DIV切换或图片滑动CSS
如何实现APP左右滑动DIV切换或图片滑动CSS 作者:张国军_Suger 开发工具与关键技术:HBuilderX C#.HTML 由于之前没有接触过APP之类的项目,今年才开始接触, ...
php 生成纯黑白图片,使用CSS将彩色图片转换为黑白图片
通过使用过滤器我们能够不使用photoshop等图像软件或js.php等技术就可以进行各种图像处理.现在,CSS过滤器已经被各种现代浏览器广泛支持,我们可以使用一些组合的方法,来制作跨浏览器的图像处理 ...
将文字定位到浮动图片上|CSS
将文字定位到浮动图片上CSS 效果展示 <div class="remmend-item"><div class="image">< ...

html瀑布流布局是什么,瀑布流布局图片与css多种实现思路剖析

html瀑布流布局是什么,瀑布流布局图片与css多种实现思路剖析相关推荐

最新文章

热门文章