前言瀑布流结构简而言之就是类似瀑布流的结构嘛，这么一讲大家大概还是不是了解的很明白，来来来，那现在我给大家上一个常见的实例:
相信大家在百度上搜刮图片时的时候，网页图片的结构就是如许子的吧，什么？你还是不清晰瀑布流，那咱就再我看一个那没关系，淘宝大家应该再熟悉不外了吧!
我们可以发现图中每个商品框的高度差别的，因此导致我们的商品图片的高度结构都不在一个高度上。在百度搜刮图片的时候我们发现每张图片的宽度都是不一样的那为什么所用图片的宽度它能刚刚好的占满一行呢? 这就是我本日本日教大家的结构方式——waterfall 结构，那该怎么实现呢？那我们就不多说啦，直接上干货! 一、总体效果瀑布流的搭建完的效果如下：
二、HTML+CSS简单结构首先大家在网上搜刮一些图片或者用一下本身喜欢的图片均可，用html搭建好框架网页的框架将图片存放好，我们这里使用的了20张图为例。其次使用html+css实现一个简单的结构，这有个关键的步骤：我们对比上面百度和淘宝页面的瀑布流结构就不难发现，要实现瀑布流全部图片都得有个相同的高度或者高度。因此我们这就给所用照片设置一个固定的宽度，但不限定的图片的高度保证每图片都按其原始比例完整展示出来。 HTML，CSS代码如下： css代码 [code] *{ margin: 0; padding: 0; } #container{ position: relative; } .box{ float: left;/* 给每个存放照片box设置为浮动元素，让全部的图片浮动到网页的第一行*/ 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; }[/code]html代码 [code] <!DOCTYPE html> <html lang="en"> <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"> <title>js 瀑布流</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div id="container"> <div class="box"> <div class="box-img"> <img src="./img/1.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/2.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/3.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/4.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/5.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/6.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/7.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/8.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/9.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/10.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/1.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/2.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/3.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/4.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/5.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/6.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/7.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/8.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/9.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/10.jpg" alt=""> </div> </div> </div> <script src="./index.js"></script> </body> </html>[/code] [code]html和css修饰后的网页的效果是怎样的的呢？[/code]
我们给每个盒子都使用了一个float：left属性，让图片离开文档来到网页的最上端，但是图片过多时有部分图片被挤到了第二行，可是他们并没有像我们假想的那样像瀑布式的排列，那我们该怎么实现呢，这时我们的的JS就要派上用场啦。 三、JS实现后续结构通过js实现将第一行后的图片排列在紧凑的排列在每一列中 代码如下代码（附带有具体解释）： [code] 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 } } } [/code]JS算法思路及操纵：
通过 ccontent[0].offsetWidth （每一张图片的宽度都是一样的，因此取数组中任意元素均可）获取css中我们给每张图片设置的固定宽度，其次使用 document.documentElement.clientWidth 获取当前网页比例下浏览器的宽度，求出一行最多能整存多少张图片（即多少列）,再使用for循环摆放图片，先将第一行摆满，创建BoxHeightArr[]数组存放每列的高度，将Math.min() 方法应用于 BoxHeightArr[]数组中，求出高度最低的列，创建 getMinHeightLocatio()函数获取列高度最小列的位置下标，与container div 绝对定位摆放，完成后更新每列列高，直至图片摆放完成。 总结到此这篇关于HTML+CSS+JS实现图片的瀑布流结构的示例代码的文章就先容到这了,更多相干HTML瀑布流内容请搜刮脚本之家以前的文章或继续浏览下面的相干文章，希望大家以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/772499.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 09:15 , Processed in 0.042145 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
