• 售前

  • 售后

热门帖子
入门百科

怎样用JS实现网页瀑布流结构

[复制链接]
司驴迁咏 显示全部楼层 发表于 2021-10-26 13:40:58 |阅读模式 打印 上一主题 下一主题
目次


  • 媒介:
  • 什么是瀑布流布局:
  • 如何实现:

    • 1. 获取图片
    • 2. 设置图片宽带
    • 3. 盘算浏览器页面一行最多能存放图片的数目
    • 4. 比较图片高度
    • 5. 得到上一行中最小高度图片的位置
    • 6. 插图

  • 完备代码如下:

媒介:


瀑布流 又称瀑布流式布局,是比较盛行的一种网站页面布局方式。即多行等宽元素分列,背面的元素依次添加到厥后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。

什么是瀑布流布局:


先看效果:

       
  • 图片多行等宽元素分列,背面的元素依次添加到厥后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。   
  • 为了方便理解,在此先给上html、css代码
不完备html代码:
  1. <div id="container">
  2.         <div class="box">
  3.             <div class="box-img">
  4.                 <img src="./img/1.jpg" alt="">
  5.             </div>
  6.         </div>
  7.         <div class="box">
  8.             <div class="box-img">
  9.                 <img src="./img/2.jpg" alt="">
  10.             </div>
  11.         </div>
  12.         <div class="box">
  13.             <div class="box-img">
  14.                 <img src="./img/3.jpg" alt="">
  15.             </div>
  16.         </div>
  17.      </div>
  18.      ......<!-- 省略了图片,多少张图片自行决定-->
复制代码
完备的css代码
  1. *{
  2.         padding: 0;
  3.         margin: 0;
  4.     }
  5.     #container{
  6.         position: relative;
  7.     }
  8.     .box{
  9.         float: left;
  10.         padding: 15px;
  11.     }
  12.     .box-img {
  13.         width: 150px;
  14.         padding: 5px;
  15.         border: 1px solid #ccc ;
  16.         box-shadow: 0 0 5px #ccc;
  17.         border-radius: 5px;
  18.     }
  19.     .box-img img{
  20.         width: 100%;
  21.         height: auto;
  22.     }
复制代码
如何实现:


简朴地来说,如果要实现瀑布流布局,得完成这几件事✍

1. 获取图片
  1. function getChildElemnt() {
  2.     const contentArr = []//定义数组准备装图
  3.     const parent = document.getElementById(container)//得到整个页面
  4.     const allContent = parent.getElementsByTagName('*')//得到整个标签
  5.     console.log(allContent);
  6.     for (var i = 0; i < allContent.length; i++) {
  7.       if (allContent[i].className == 'box') {
  8.         contentArr.push(allContent[i])//将class='box'的标签装入数组
  9.       }
  10.     }
  11.     console.log(contentArr);
  12.     return contentArr//返回数组
  13. }
复制代码
2. 设置图片宽带
  1. var ccontent = getChildElemnt()
  2.   var imgWidth = ccontent[0].offsetWidth//令所有图片宽度等于第一张图片
复制代码
3. 盘算浏览器页面一行最多能存放图片的数目
  1. var dWidth=document.documentElement.clientWidth//页面宽度
  2. var num = Math.floor(dWidth/ imgWidth)
  3. //Math.floor()向下取整
复制代码
4. 比较图片高度


由于在瀑布流布局中,当第一行图片已经摆满后,第二行的第一张图片要放在第一行中高度最小的图片的下面
  1. var BoxHeightArr = []//定义一个数组,把每张图片的高度依次放进去
  2.     for (var i = 0; i < ccontent.length; i++) {
  3.       if (i < num) {
  4.         BoxHeightArr[i] = ccontent[i].offsetHeight//将图片的高度存入数组
  5.       } else {//当第一行已经存放不了图片后
  6.         var minHeight = Math.min.apply(null, BoxHeightArr)//比较出上一行最小的高度
  7.         
  8.       }
  9.     }
复制代码
5. 得到上一行中最小高度图片的位置
  1. //定义一个getMinHeightLocation函数,给它传入BoxHeightArr上一行全部图片,和minHeight上一行图片的最小高度
  2.   function getMinHeightLocation(BoxHeightArr, minHeight) {
  3.     for (var i in BoxHeightArr) {
  4.       if (BoxHeightArr[i] === minHeight) {//当图片高度等于最小高度时,该图片的位置为最小高度图片的位置
  5.         return i
  6.       }
  7.     }
  8.   }
复制代码
6. 插图
  1.     for (var i = 0; i < ccontent.length; i++) {
  2.     if (i < num) {
  3.       BoxHeightArr[i] = ccontent[i].offsetHeight
  4.     } else {
  5.       var minHeight = Math.min.apply(null, BoxHeightArr)
  6.       var minIndex = getMinHeightLocation(BoxHeightArr, minHeight)
  7.       ccontent[i].style.position = 'absolute'//将要插入的图片绝对定位,即元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
  8.       ccontent[i].style.top = minHeight + 'px'//令插入的图片到顶端的距离刚好等于要插其下面图片的高度
  9.       ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px'//令插入的图片到最左边的距离刚好等于要插其下面图片到最左边的距离
  10.       BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight//插入图片后,得将这位置的高度设为两张图片的高度和
  11.     }
  12.   }
复制代码
完备代码如下:


优化代码,进步性能
  1. window.onload = function() {
  2.   imgLocation('container', 'box')//构造函数imgLocation
  3. }
  4. //用window.onload = function() {}函数就不用等着body页面中调用就可以执行了
  5. // 获取到当前有多少张图片要摆放
  6. function imgLocation(parent, content) {//令parent='container',content='box'
  7.   // 将parent下所有的内容全部取出
  8.   var cparent = document.getElementById(parent)
  9.   var ccontent = getChildElemnt(cparent, content)
  10.   var imgWidth = ccontent[0].offsetWidth
  11.   var num = Math.floor(document.documentElement.clientWidth / imgWidth)
  12.   cparent.style.cssText = `width: ${imgWidth * num} px`
  13.   var BoxHeightArr = []
  14.   for (var i = 0; i < ccontent.length; i++) {
  15.     if (i < num) {
  16.       BoxHeightArr[i] = ccontent[i].offsetHeight
  17.     } else {
  18.       var minHeight = Math.min.apply(null, BoxHeightArr)
  19.       var minIndex = getMinHeightLocation(BoxHeightArr, minHeight)
  20.       ccontent[i].style.position = 'absolute'
  21.       ccontent[i].style.top = minHeight + 'px'
  22.       ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px'
  23.       BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight
  24.     }
  25.   }
  26.   // console.log(BoxHeightArr);
  27. }
  28. function getChildElemnt(parent, content) {parent='container',content='box'
  29.   const contentArr = []
  30.   const allContent = parent.getElementsByTagName('*')
  31.   console.log(allContent);
  32.   for (var i = 0; i < allContent.length; i++) {
  33.     if (allContent[i].className == content) {
  34.       contentArr.push(allContent[i])
  35.     }
  36.   }
  37.   console.log(contentArr);
  38.   return contentArr
  39. }
  40. function getMinHeightLocation(BoxHeightArr, minHeight) {
  41.   for (var i in BoxHeightArr) {
  42.     if (BoxHeightArr[i] === minHeight) {
  43.       return i
  44.     }
  45.   }
  46. }
复制代码
以上就是如何用JS实现网页瀑布流布局的详细内容,更多关于JS实现网页瀑布流布局的资料请关注草根技能分享别的相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作