css3瀑布流布局,css瀑布流式页面布局

前言

　　瀑布流布局简直和瀑布流布局差不多，大家可能不是很懂。来，我现在举个常见的例子：

　　相信你在百度上搜索图片的时候，网页图片的布局是这样的。什么？你还是不知道瀑布，我再看一个。没关系，淘宝应该大家都不陌生吧！

　　我们可以发现图片中每个商品盒的高度是不一样的，所以我们的商品图片的高度布局并不在一个高度上。百度搜图片的时候发现每张图片的宽度都不一样，那么为什么用的图片宽度刚好能占满一行呢？

　　这是我今天教你的布局方法：——waterfall布局，那么如何实现呢？那我们就不多说了，直接上干货！

一、总体效果

　　施工后的瀑布流效果如下：

二、HTML+CSS简单布局

　　首先你可以在网上搜索一些图片或者用自己喜欢的图片。使用html构建框架页面的框架并存储图片。这里我们用了20张图片作为例子。其次，用html css实现简单的布局，有一个关键的步骤:对比上面百度和淘宝页面的瀑布布局，不难发现，要实现瀑布，所有图片必须具有相同的高度或高度。所以我们会对使用的照片设定一个固定的宽度，但是对图片的高度没有限制，以保证每张图片都会完全按照原来的比例显示出来。

　　HTML，CSS代码如下：

　　Css代码

　　*{边距：0；填充：0；} #容器{ position:relative；} .box { float:left；/*将每个存放照片的框设置为浮动元素，让所有图片浮动到网页的第一行*/padding:5px；} .box-img { width:150 px；填充：5px边框：1px纯色# ccc盒影：0 0 5px # ccc边框半径：5px} .box-img img {宽度：100%；高度：自动；}html代码

　　！doctype html html lang= in head meta charset= utf-8 meta http-equiv= x-ua compatible content= ie=edge meta name= viewport content= width=device-width，initial-scale=1.0 titles瀑布流/title link rel=样式表 href= ./index。CSS /head body div id= container div class= box div class= box-img img src= ./img/1。jpg alt=/div/div class= box div class= box-img img src= ./img/2。jpg alt=/div/div class= box div class= box-img img src= ./img/3。jpg alt=/div/div class= box div class= box-img img src= ./img/4。jpg alt=/div/div class= box div class= box-img img src= ./img/5。jpg alt=/div/div class= box div class= box-img img src= ./img/6。jpg alt=/div/div class= box div class= box-img img src= ./img/7。jpg alt=/div/div class= box div class= box-img img src= ./img/8。jpg alt=/div/div class= box div class= box-img img src= ./img/9。jpg alt=/div/div class= box div class= box-img img src= ./img/10。jpg alt=/div/div class= box div class= box-img img src= ./img/1。jpg alt=/div/div class= box div class= box-img img src= ./img/2。jpg alt=/div/div class= box div class= box-img img src= ./img/3。jpg alt=/div/div class= box div class= box-img img src= ./img/4。jpg alt=/div/div class= box div class= box-img img src= ./img/5。jpg alt=/div/div class= box div class= box-img img src= ./img/6。jpg alt=/div/div class= box div class= box-img img src= ./img/7。jpg alt=/div/div class= box div class= box-img img src= ./img/8。jpg alt=/div/div class= box div class= box-img img src= ./img/9。jpg alt=/div/div class= box div class= box-img img src= ./img/10。jpg alt=/div/div脚本src= ./index。js /script/body/html html你好CSS(CSS)修饰后的网页的效果是怎样的的呢？

　　我们给每个盒子都使用了一个浮点：左是吗，让图片脱离文档来到网页的最上端，但是图片过多时有部分图片被挤到了第二行，可是他们并没有像我们设想的那样像瀑布式的排列，那我们该怎么实现呢，这时我们的的联署材料就要派上用场啦。

三、JS实现后续布局

　　阿久联署材料实现将第一行后的图片排列在紧凑的排列在每一列中

　　代码如下代码（附带有详细注释):

　　窗户。onload=function(){ img location( container ， box) } //获取到当前有多少张图片要摆放function imgLocation(parent，content) { //将集装箱d下所有的内容全部取出var c parent=document。getelementbyid(parent)//获取容器盒子的标签var c content=getChildElemnt(c parent，content)//图片时放在容器盒子里的包厢盒子里的，因此我们还需要定义一个函数getChildElemnt()获取出包厢里的图片var imgWidth=ccontent[0].offsetWidth//获取钢性铸铁中我们给每张图片设置的固定宽度var num=数学。楼层(文档。documentelement。客户端宽度/图像宽度)//获取浏览器身体的宽度计算最多能放几张我们的图片c家长。风格。CSS text=` width:$ { img width * num } px `//摆放图片var BoxHeightArr=[]for(var I=0；长度；i ) { if (i num) { //我们先将第一行摆满BoxHeightArr[i]=ccontent[i].偏高//这里我们通过BoxHeightArr[]数组存放每列的高度} else { //剩下的图片我们依次次优先选择摆在高度最低的一列后面var最小高度=数学。量滴apply(null，BoxHeightArr) //通过将Math.min()中求最小值的方法应用到数组中，求出高度最低的列var minIndex=getMinHeightLocation(BoxHeightArr，minHeight) //确定了高度最低的列后我们就差求出列的位置了，我们通过编写一个函数实现//最后将我们的图片相对于容器盒子进行定位放在每一列下就可以啦c内容[I]。风格。position= absolute c content[I]。风格。top=最小高度 px c含量[I]。风格。left=c content[minIndex].offsetLeft px //最后不忘记跟新每一列的高度哦BoxHeightArr[minIndex]=BoxHeightArr[minIndex]ccontent[I].偏移高度} }//控制台。log(BoxHeightArr)；} function getChildElemnt(parent，content){ const contentArr=[]const all content=parent。getelementsbytagname( * )//通过内置函数getElementsByTagName()将容器中的所有元素取出来//控制台。日志(所有内容)；for(var I=0；i allContent.lengthi ) {//但是容器中所有的元素中我们只需要的是所有的img，为此我们写个为循环将所用图片筛选出来存放在一个数组中if (allContent[i].class name==content){内容数组。push(所有内容[I])} }//控制台。日志(内容安排)；返回contentArr } //获取列最高度最小列的位置下标函数函数getMinHeightLocation(BoxHeightArr，最小高度){ for(BoxHeightArr中的var I){ if(BoxHeightArr[I]===最小高度){ return I } } } JS算法思路及操作：

　　获取所有需要排列的图像。因为图像被放置在容器盒的盒子中，所以我们定义了一个函数getChildElemnt()来获取盒子中的图像。在这个函数中，我们通过内置函数getElementsByTagName()获取容器中的所有元素。但是，container中我们需要的所有元素都是img，所以我们编写了一个for循环来过滤掉使用的img，并将它们存储在我们定义的content[]数组中。提取完所有图片后，我们需要确定图片排列的位置。首先，我们将填充第一行，其余的图片将排列在高度最低的列的后面。为此，在排列每张图片时，我们需要找到高度最低的列，并通过ccontent[0]确定其位置。offsetWidth(每张图片的宽度相同，因此可以取数组中的任何元素)来获取我们在css中为每张图片设置的固定宽度。其次，利用document . documentelement . client width得到当前网页比例下浏览器的宽度，计算出一行可以存储的最大图片数(即多少列)。然后，使用for循环放置图片，并填充第一行。创建一个BoxHeightArr[]数组存储每列的高度，将Math.min()方法应用于BoxHeightArr[]数组，找到最低的列，创建getMinHeightLocatio()函数获取列高度最低的列的位置下标，用容器div绝对放置。完成后，更新每列的高度，直到图片放置完毕。

总结

　　就是这样。本文介绍了HTML CSS JS实现图片瀑布布局的示例代码。更多相关HTML瀑布内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。