日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

瀑布流布局是一種比較流行的頁面布局方式，表現(xiàn)為參差不齊的多欄卡片。跟網(wǎng)格布局相比，顯得更靈動(dòng)，更具藝術(shù)氣息。

創(chuàng)新互聯(lián)公司從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元如東做網(wǎng)站,已為上家服務(wù),為如東各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

瀑布流布局

實(shí)現(xiàn)瀑布流布局的方式有多種，比如multi-column布局，grid布局，flex 布局等。但是這些實(shí)現(xiàn)方式都有各自的局限性，代碼也略復(fù)雜。

其實(shí)，有個(gè)最原始、最簡(jiǎn)單，也是兼容性最好的實(shí)現(xiàn)方式，那就是使用絕對(duì)定位。瀑布流布局的元素是一些等寬不等高的卡片，只要根據(jù)元素的實(shí)際寬高計(jì)算出自己的坐標(biāo)位置就行了。

要計(jì)算坐標(biāo)自然要用到 JavaScript，這就不是純 CSS 方案，對(duì)某些前端極客來講顯得不那么純粹。不過只要理清思路了，也用不了幾行代碼。本文就給出最近實(shí)現(xiàn)的一個(gè)版本。

 
 
 
 

  
  
  
  
// 計(jì)算每個(gè)卡片的坐標(biāo) 
  
  
  
  
export function calcPositions({ columns = 2, gap = 7, elements }) { 
  
  
  
  
  if (!elements || !elements.length) { 
  
  
  
  
    return []; 
  
  
  
  
  } 
  
  
  
  
  const y = []; //上一行卡片的底部縱坐標(biāo)數(shù)組，用于找到新卡片填充位置 
  
  
  
  
  const positions = []; // 每個(gè)卡片的坐標(biāo)數(shù)組 
  
  
  
  
  elements.forEach((item, index) => { 
  
  
  
  
    if (y.length < columns) { // 還未填滿一行 
  
  
  
  
      y.push(item.offsetHeight); 
  
  
  
  
      positions.push({ 
  
  
  
  
        left: (index % columns) * (item.offsetWidth + gap), 
  
  
  
  
        top: 0 
  
  
  
  
      }); 
  
  
  
  
    } else { 
  
  
  
  
      const min = Math.min(...y); // 最小縱坐標(biāo) 
  
  
  
  
      const idx = y.indexOf(min); // 縱坐標(biāo)最小的卡片索引 
  
  
  
  
      y.splice(idx, 1, min + gap + item.offsetHeight); // 替換成新卡片的縱坐標(biāo) 
  
  
  
  
      positions.push({ 
  
  
  
  
        left: idx * (item.offsetWidth + gap), 
  
  
  
  
        top: min + gap 
  
  
  
  
      }); 
  
  
  
  
    } 
  
  
  
  
  }); 
  
  
  
  
// 由于采用絕對(duì)定位，容器是無法自動(dòng)撐開的。因此需要計(jì)算實(shí)際高度，即最后一個(gè)卡片的top加上自身高度 
  
  
  
  
  return { positions, containerHeight: positions[positions.length - 1].top + elements[elements.length - 1].offsetHeight }; 
  
  
  
  
} 
 
 
 
 

上面這段代碼的作用就是計(jì)算每個(gè)卡片的left、top，以及容器的總高度。關(guān)鍵位置都有注釋，應(yīng)該不難理解。

有了這幾行核心代碼，要想封裝成瀑布流組件就很容易了。以 Vue 為例，可以這樣封裝：

MasonryLite.vue

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
.masonry-lite{ 
  
  
  
  
  position: relative; 
  
  
  
  
} 
  
  
  
  
.masonry-item { 
  
  
  
  
  position: absolute; 
  
  
  
  
} 
  
  
  
  
 
 
 
 
 

使用組件：

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
     
  
  
  
  
    
{{ item.title }}