浅谈瀑布流

番茄西红柿发布于2019-04-23 13:27 / 1163人阅读

摘要：瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。那么规则是什么呢下面通过图解来分析一下瀑布流的算法。看懂这个图示应该就能理解了瀑布流的原理算法。

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。

瀑布流布局效果

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

那么规则是什么呢？
下面通过图解来分析一下瀑布流的算法。

图解瀑布流算法

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

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

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

为什么呢？
因为放置它之前，这一列的高度为所有列中最小，所以会放置在这个地方。
所以我们知道了，如果再继续放置下去，第七张图片应该是这个位置，对吗？

通过瀑布流算法实验得出位置正确。看懂这个图示应该就能理解了瀑布流的原理算法。

JS 实现代码

这里使用了jQuery

  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)
    })
  }

View Code

Demo 演示

瀑布流 Demo 效果

总结瀑布流布局原理

设置图片宽度一致
根据浏览器宽度以及每列宽度计算出列表个数，列表默认0
当图片加载完成，所有图片依次放置在最小的列数下面
父容器高度取列表数组的最大值

实战相关

瀑布流 + 懒加载实现新闻站
https://github.com/evenyao/waterfall-sinanews

专线服务混合云瀑布流瀑布流方式 gridview瀑布流 jquery瀑布流

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1894.html

RecyclerView瀑布流优化方案探讨

摘要：是规则的瀑布流。普通的尺寸会出现错位的问题索引这个是右边这个是左边间距解决办法，可以通过里的来判断，这个方法不管你高度怎样，他都是左右左右开始排列的。目录介绍 01.规则瀑布流实现02.不规则瀑布流实现2.1 实现方式2.2 遇到问题03.瀑布流上拉加载04.给瀑布流设置分割线05.自定义Manager崩溃06.如何避免刷新抖动07.为何有时出现跳动08.瀑布流图片优化09.onBi...

zhaofeihao 2019-08-19 10:28 评论0 收藏0
记一段SPA的SEO历程：Html5 History Api 大显神通！

摘要：用户体验的需求，完美地保留了瀑布流模态框的阅读模式。不支持的话，就不拦截瀑布流文块的，也就是直接让其跳转。背景想当年，我做了一个新媒体网站项目（AIISPO，已下线）。跟普通资讯网站不一样的是，老板要求PC端前台的文章阅读模式一定得是瀑布流+模态框。瀑布流指的是以瀑布流的形式将文章罗列出来，而模态框则指的是点击瀑布流中代表文章的某个文块时，直接在当前页面弹出模态框来显示文章正文。 ...

Lyux 2019-08-19 17:12 评论0 收藏0
记一段SPA的SEO历程：Html5 History Api 大显神通！

摘要：用户体验的需求，完美地保留了瀑布流模态框的阅读模式。不支持的话，就不拦截瀑布流文块的，也就是直接让其跳转。背景想当年，我做了一个新媒体网站项目（AIISPO，已下线）。跟普通资讯网站不一样的是，老板要求PC端前台的文章阅读模式一定得是瀑布流+模态框。瀑布流指的是以瀑布流的形式将文章罗列出来，而模态框则指的是点击瀑布流中代表文章的某个文块时，直接在当前页面弹出模态框来显示文章正文。 ...

greatwhole 2019-08-02 18:26 评论0 收藏0
记一段SPA的SEO历程：Html5 History Api 大显神通！

摘要：用户体验的需求，完美地保留了瀑布流模态框的阅读模式。不支持的话，就不拦截瀑布流文块的，也就是直接让其跳转。背景想当年，我做了一个新媒体网站项目（AIISPO，已下线）。跟普通资讯网站不一样的是，老板要求PC端前台的文章阅读模式一定得是瀑布流+模态框。瀑布流指的是以瀑布流的形式将文章罗列出来，而模态框则指的是点击瀑布流中代表文章的某个文块时，直接在当前页面弹出模态框来显示文章正文。 ...

reclay 2019-07-01 14:17 评论0 收藏0
纯css实现瀑布流（multi-column多列及flex布局）

瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流先简单的讲下multi-column相关的部分属性 column-count设置列数 column-gap设置列与列之间的间距 column-width设置每列的宽度还要结合在子容器中...

DC_er 2019-08-02 16:03 评论0 收藏0