关于前端:浅谈瀑布流

8次阅读

共计 1721 个字符，预计需要花费 5 分钟才能阅读完成。

瀑布流又称瀑布流式布局，是比拟风行的一种网站页面布局形式。视觉体现为参差不齐的多栏布局，最早采纳此布局的是网站是 Pinterest，后逐步在国内风行。

即多行等宽元素排列，前面的元素顺次增加到其后，等宽不等高，依据图片原比例缩放直至宽度达到咱们的要求，顺次依照规定放入指定地位。
那么规定是什么呢？
上面通过图解来剖析一下瀑布流的算法。

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

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

咱们通过瀑布流算法试验失去，前面紧跟的第六张图片的地位应该是这个地位。

为什么呢？
因为搁置它之前，这一列的高度为所有列中最小，所以会搁置在这个中央。
所以咱们晓得了，如果再持续搁置上来，第七张图片应该是这个地位，对吗？

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

这里应用了 jQuery

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>

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

</script>

瀑布流 Demo 成果

设置图片宽度统一