浅谈页面的瀑布流布局

瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。

视觉表现为参差不齐的多栏布局,最早采用此布局的是网站是 Pinterest,后逐渐在国内流行。

瀑布流布局效果

即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。

那么规则是什么呢?

下面通过图解来分析一下瀑布流的算法。

图解瀑布流算法

当第一排排满足够多的等宽图片时(如下图情况),自然而然的考虑到之后放置的图片会往下面排放。

 

那么第六张图片,放置在什么位置呢?是下图的位置么?

  

我们通过瀑布流算法实验得到,后面紧跟的第六张图片的位置应该是这个位置。

  

为什么呢?

因为放置它之前,这一列的高度为所有列中最小,所以会放置在这个地方。

所以我们知道了,如果再继续放置下去,第七张图片应该是这个位置,对吗?

  

通过瀑布流算法实验得出位置正确。

看懂这个图示应该就能理解了瀑布流的原理算法。

  

JS 实现代码

    var colCount   //定义列数
  var colHeightArry= []   //定义列高度数组
  var imgWidth = $('.waterfall img').outerWidth(true)   //单张图片的宽度

  colCount = parseInt($('.waterfall').width()/imgWidth)   //计算出列数
  for(var i = 0 ; i < colCount; i ++){
    colHeightArry[i] = 0
  }
  //[0,0,0]

  $('.waterfall img').on('load',function(){

    var minValue = colHeightArry[0]  //定义最小的高度
    var minIndex = 0  //定义最小高度的下标
    for(var i = 0 ; i < colCount; i ++){
      if(colHeightArry[i] < minValue){   //如果最小高度组数中的值小于最小值
        minValue = colHeightArry[i]   //那么认为最小高度数组中的值是真正的最小值
        minIndex = i  //最小下标为当前下标
      }
    }

    $(this).css({
      left: minIndex * imgWidth,
      top: minValue
    })
    colHeightArry[minIndex] += $(this).outerHeight(true)
  })


  //当窗口大小重置之后,重新执行
  $(window).on('resize',function(){
    reset()
  })


  //当窗口加载完毕,执行瀑布流
  $(window).on('load',function(){
    reset()
  })

  //定义reset函数
  function reset(){
    var colHeightArry= []
    colCount = parseInt($('.waterfall').width()/imgWidth)
    for(var i = 0 ; i < colCount; i ++){
      colHeightArry[i] = 0
    }
    $('.waterfall img').each(function(){
      var minValue = colHeightArry[0]
      var minIndex = 0
      for(var i = 0 ; i < colCount; i ++){
        if(colHeightArry[i] < minValue){
          minValue = colHeightArry[i]
          minIndex = i
        }
      }

      $(this).css({
        left: minIndex * imgWidth,
        top: minValue
      })
      colHeightArry[minIndex] += $(this).outerHeight(true)
    })
  }

总结瀑布流布局原理

  • 设置图片宽度一致

  • 根据浏览器宽度以及每列宽度计算出列表个数,列表默认0

  • 当图片加载完成,所有图片依次放置在最小的列数下面

  • 父容器高度取列表数组的最大值

 

出处:https://www.cnblogs.com/guchengnan/p/9569169.html

posted on   jack_Meng  阅读(9673)  评论(0编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2018-10-23 NPOI之Excel——设置单元格背景色
2018-10-23 NPOI之Excel——合并单元格、设置样式、输入公式、设置筛选等
2018-10-23 NET使用NPOI组件导出Excel-入门示例及通用方法

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

支付宝打赏

主题色彩