国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淺談瀑布流

番茄西紅柿 / 1284人閱讀

摘要：瀑布流又稱瀑布流式布局，是比較流行的一種網(wǎng)站頁面布局方式。那么規(guī)則是什么呢下面通過圖解來分析一下瀑布流的算法。看懂這個圖示應該就能理解了瀑布流的原理算法。

瀑布流又稱瀑布流式布局，是比較流行的一種網(wǎng)站頁面布局方式。視覺表現(xiàn)為參差不齊的多欄布局，最早采用此布局的是網(wǎng)站是 Pinterest，后逐漸在國內(nèi)流行。

瀑布流布局效果

 

即多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，根據(jù)圖片原比例縮放直至寬度達到我們的要求，依次按照規(guī)則放入指定位置。

那么規(guī)則是什么呢？
下面通過圖解來分析一下瀑布流的算法。

圖解瀑布流算法

當?shù)谝慌排艥M足夠多的等寬圖片時（如下圖情況），自然而然的考慮到之后放置的圖片會往下面排放。

   

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

   

我們通過瀑布流算法實驗得到，后面緊跟的第六張圖片的位置應該是這個位置。

   

為什么呢？
因為放置它之前，這一列的高度為所有列中最小，所以會放置在這個地方。
所以我們知道了，如果再繼續(xù)放置下去，第七張圖片應該是這個位置，對嗎？

   

通過瀑布流算法實驗得出位置正確?？炊@個圖示應該就能理解了瀑布流的原理算法。

   

JS 實現(xiàn)代碼

這里使用了jQuery

  var colCount   //定義列數(shù)
  var colHeightArry= []   //定義列高度數(shù)組
  var imgWidth = $(.waterfall img).outerWidth(true)   //單張圖片的寬度

  colCount = parseInt($(.waterfall).width()/imgWidth)   //計算出列數(shù)
  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){   //如果最小高度組數(shù)中的值小于最小值
        minValue = colHeightArry[i]   //那么認為最小高度數(shù)組中的值是真正的最小值
        minIndex = i  //最小下標為當前下標
      }
    }

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


  //當窗口大小重置之后，重新執(zhí)行
  $(window).on(resize,function(){
    reset()
  })


  //當窗口加載完畢，執(zhí)行瀑布流
  $(window).on(load,function(){
    reset()
  })

  //定義reset函數(shù)
  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 效果

 

總結瀑布流布局原理

  • 設置圖片寬度一致
  • 根據(jù)瀏覽器寬度以及每列寬度計算出列表個數(shù)，列表默認0
  • 當圖片加載完成，所有圖片依次放置在最小的列數(shù)下面
  • 父容器高度取列表數(shù)組的最大值

實戰(zhàn)相關

瀑布流 + 懶加載 實現(xiàn)新聞站
https://github.com/evenyao/waterfall-sinanews

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1894.html

相關文章

  • RecyclerView瀑布流優(yōu)化方案探討

    摘要：是規(guī)則的瀑布流。普通的尺寸會出現(xiàn)錯位的問題索引這個是右邊這個是左邊間距解決辦法，可以通過里的來判斷，這個方法不管你高度怎樣，他都是左右左右開始排列的。 目錄介紹 01.規(guī)則瀑布流實現(xiàn)02.不規(guī)則瀑布流實現(xiàn)2.1 實現(xiàn)方式2.2 遇到問題03.瀑布流上拉加載04.給瀑布流設置分割線05.自定義Manager崩潰06.如何避免刷新抖動07.為何有時出現(xiàn)跳動08.瀑布流圖片優(yōu)化09.onBi...

    zhaofeihao 評論0 收藏0

  • 記一段SPA的SEO歷程：Html5 History Api 大顯神通！

    摘要：用戶體驗的需求，完美地保留了瀑布流模態(tài)框的閱讀模式。不支持的話，就不攔截瀑布流文塊的，也就是直接讓其跳轉(zhuǎn)。 背景 想當年，我做了一個新媒體網(wǎng)站項目（AIISPO，已下線）。跟普通資訊網(wǎng)站不一樣的是，老板要求PC端前臺的文章閱讀模式一定得是瀑布流+模態(tài)框。瀑布流指的是以瀑布流的形式將文章羅列出來，而模態(tài)框則指的是點擊瀑布流中代表文章的某個文塊時，直接在當前頁面彈出模態(tài)框來顯示文章正文。 ...

    Lyux 評論0 收藏0

  • 記一段SPA的SEO歷程：Html5 History Api 大顯神通！

    摘要：用戶體驗的需求，完美地保留了瀑布流模態(tài)框的閱讀模式。不支持的話，就不攔截瀑布流文塊的，也就是直接讓其跳轉(zhuǎn)。 背景 想當年，我做了一個新媒體網(wǎng)站項目（AIISPO，已下線）。跟普通資訊網(wǎng)站不一樣的是，老板要求PC端前臺的文章閱讀模式一定得是瀑布流+模態(tài)框。瀑布流指的是以瀑布流的形式將文章羅列出來，而模態(tài)框則指的是點擊瀑布流中代表文章的某個文塊時，直接在當前頁面彈出模態(tài)框來顯示文章正文。 ...

    reclay 評論0 收藏0

  • 純css實現(xiàn)瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感覺還是很吸引人的，最近又看到實現(xiàn)瀑布流這個做法，在這里記錄下，特別的，感覺flex布局實現(xiàn)瀑布流還是有點懵的樣子，不過現(xiàn)在就可以明白它的原理了 1.multi-column多列布局實現(xiàn)瀑布流 先簡單的講下multi-column相關的部分屬性 column-count設置列數(shù) column-gap設置列與列之間的間距 column-width設置每列的寬度 還要結合在子容器中...

    DC_er 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<