Shulou(Shulou.com)06/01 Report--

This article is about how to implement waterfall layout in html5. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

HTML+CSS Simple Layout

First of all, we can search some pictures on the Internet or use our favorite pictures. We can use html to build a good frame page to store the pictures. We use 20 pictures here as an example. Secondly, use html+css to achieve a simple layout, which has a key step: we compare the waterfall flow layout of Baidu and Taobao pages above, it is not difficult to find that all pictures to achieve waterfall flow must have the same height or height. So we'll set a fixed width for the photos, but not a fixed height so that each image is displayed in its original scale.

HTML, CSS code is as follows:

CSS code

*{ margin: 0; padding: 0; } #container{ position: relative; } .box{ float: left;/* Set each photo box as a floating element, so that all pictures float to the first line of the page */ padding: 5px; } .box-img{ width: 150px; padding: 5px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; border-radius: 5px; } .box-img img { width: 100%; height: auto; }

html code:

JS waterfall flow

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

JS实现后续布局

通过js实现将第一行后的图片排列在紧凑的排列在每一列中

代码如下代码（附带有详细注释）：

_window.onload = function() { imgLocation('container', 'box') } // 获取到当前有多少张图片要摆放 function imgLocation(parent, content) { // 将containerd下所有的内容全部取出 var cparent = document.getElementById(parent) //获取container盒子的标签 var ccontent = getChildElemnt(cparent, content)//图片时放在container盒子里的box盒子里的，因此我们还需要定义一个函数getChildElemnt（）获取出box里的图片 var imgWidth = ccontent[0].offsetWidth//获取css中我们给每张图片设置的固定宽度 var num = Math.floor(document.documentElement.clientWidth / imgWidth) //获取浏览器body的宽度计算最多能放几张我们的图片 cparent.style.cssText = `width: ${imgWidth * num} px` //摆放图片 var BoxHeightArr = [] for (var i = 0; i < ccontent.length; i++) { if (i < num) { //我们先将第一行摆满 BoxHeightArr[i] = ccontent[i].offsetHeight //这里我们通过BoxHeightArr[]数组存放每列的高度 } else { //剩下的图片我们依次次优先选择摆在高度最低的一列后面 var minHeight = Math.min.apply(null, BoxHeightArr) //通过将Math.min()中求最小值的方法应用到数组中，求出高度最低的列 var minIndex = getMinHeightLocation(BoxHeightArr, minHeight) //确定了高度最低的列后我们就差求出列的位置了,我们通过编写一个函数实现 //最后将我们的图片相对于container盒子进行定位放在每一列下就可以啦 ccontent[i].style.position = 'absolute' ccontent[i].style.top = minHeight +'px' ccontent[i].style.left =ccontent[minIndex].offsetLeft + 'px' //最后不忘记跟新每一列的高度哦 BoxHeightArr[minIndex] =BoxHeightArr[minIndex] + ccontent[i].offsetHeight } } // console.log(BoxHeightArr); } function getChildElemnt(parent, content) { const contentArr = [] const allContent = parent.getElementsByTagName('*')//通过内置函数getElementsByTagName()将container中的所有元素取出来 // console.log(allContent); for (var i = 0; i < allContent.length; i++) {//但是container中所有的元素中我们只需要的是所有的img，为此我们写个for循环将所用img筛选出来存放在一个数组中 if (allContent[i].className == content) { contentArr.push(allContent[i]) } } // console.log(contentArr); return contentArr } //获取列最高度最小列的位置下标函数 function getMinHeightLocation(BoxHeightArr, minHeight) { for (var i in BoxHeightArr) { if (BoxHeightArr[i] === minHeight) { return i } } }

JS算法思路及操作：

将所有的需要排列的图像获取出来

因为图片时放在container盒子里的box盒子里的，因此我们定义了一个函数getChildElemnt（）获取出box的里的图片，在这个函数中通过内置函数getElementsByTagName()将container中的所有元素取出来，但是container中所有的元素中我们只需要的是所有的img，为此我们写个for循环将所用img筛选出来存放在一个我们定义的content[]数组中。

提取到所有图片后我们就要需要确定图片排列的位置，我们先将在第一行排满，剩下的图排列时依次排在在高度最小的列后面，为此我们在排列每张图片的时候都需要求出高度最小列以及确定其位置

通过 ccontent[0].offsetWidth （每一张图片的宽度都是一样的，因此取数组中任意元素均可）获取css中我们给每张图片设置的固定宽度，其次利用 document.documentElement.clientWidth 获取当前网页比例下浏览器的宽度，求出一行最多能整存多少张图片（即多少列）,再使用for循环摆放图片，先将第一行摆满，创建BoxHeightArr[]数组存放每列的高度，将Math.min() 方法应用于 BoxHeightArr[]数组中，求出高度最低的列，创建 getMinHeightLocatio()函数获取列高度最小列的位置下标，与container div 绝对定位摆放，完成后更新每列列高，直至图片摆放完成。

感谢各位的阅读!关于"在html5中怎么实现图片的瀑布流布局"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.