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

資訊專欄INFORMATION COLUMN

真的！！！兩行css代碼實現(xiàn)瀑布流，html,css最簡單的瀑布流實現(xiàn)方式且沒有缺點！

xiaokai / 2031人閱讀

摘要：兩行如下分幾列不留白，不知道什么意思可以取消這個樣式試試列間距，可有可無，默認(rèn)效果圖如下說明不存在一邊列表過長問題，很均勻，沒有缺點抱歉有坑但可以一鏈代碼解決這個列表顯示順序是左邊右邊，不符合正常展示邏輯然后可以使用對數(shù)據(jù)進(jìn)行預(yù)處

兩行css如下:

/*列間距，可有可無，默認(rèn)30px*/
/*column-gap: 0;*/

效果圖如下：

說明：不存在一邊列表過長問題，很均勻，沒有缺點

抱歉：有坑!!! 但可以一鏈代碼解決

這個列表顯示順序是 左邊 123右邊456，不符合正常展示邏輯；然后可以使用js對數(shù)據(jù)進(jìn)行預(yù)處理；
大致邏輯如下：

const oldList = [1, 2, 3, 4, 5, 6, 7]

// 使用reduce函數(shù)接受一個初始值{ 0: [], 1: [], length: 2 },
// 初始值包含兩個空數(shù)組，和一個數(shù)組長度(Array.from方法要求將對象轉(zhuǎn)數(shù)組時對象內(nèi)要有這個屬性) 
// 在reduce函數(shù)內(nèi)根據(jù)索引做余2判斷，因為分兩列，余0的加入第一個數(shù)組，余1的加入第二個數(shù)組 
// 最后reduce返回遍歷完的對象 {0:[1,3,5,7],1:[2,4,6],length:2}
// 使用Array.from({0:[1,3,5,7],1:[2,4,6],length:2}) 得到 數(shù)組 [[1,3,5,7],[2,4,6]]
// 解構(gòu)數(shù)組 使用concat合并，完事
const newList = [].concat(...(Array.from(oldList.reduce((total, cur, index) => {
  total[index % 2].push(cur)
  return total
}, { 0: [], 1: [], length: 2 }))))

console.log(newList)

輸出

[1, 3, 5, 7, 2, 4, 6]

這樣處理一下就可以 讓列表展示順序變?yōu)?左邊 1， 3， 5， 7 右邊 2， 4， 6

2019年1月12日
我用的chrome 版本 70.0.3538.102（正式版本） （64 位）
以上代碼沒有問題，如果你用的老版瀏覽器可能存在兼容問題，就再多加幾個重復(fù)的兼容瀏覽器的屬性就行了，如下：

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;

以此類推

html代碼大致如下：


    
 vue的語法，不會就粘貼20個div看效果
        內(nèi)容... 這里可以自己實現(xiàn)寬高不一樣的div，看效果

之前還用flex實現(xiàn)了一個，有坑，一邊太長，一邊太短,請先大致了解flex，寫過demo再往下看，效果圖如下：

實現(xiàn)方式如下：

一行里面兩列，可以控制每列數(shù)量相等，

每列里面各自循環(huán)，下面?zhèn)未a

但是有個坑，如果左邊都很高，右邊比較矮，就會出現(xiàn)右邊空很多的內(nèi)容， 在找解決辦法

下面的 指的是
css：

.row{
    display:flex;
    flex-direction:row;
}

同理

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

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

相關(guān)文章

  • 真的！！！兩行css代碼實現(xiàn)瀑布流，html,css最簡單的瀑布流實現(xiàn)方式且沒有缺點！

    摘要：兩行如下分幾列不留白，不知道什么意思可以取消這個樣式試試列間距，可有可無，默認(rèn)效果圖如下說明不存在一邊列表過長問題，很均勻，沒有缺點抱歉有坑但可以一鏈代碼解決這個列表顯示順序是左邊右邊，不符合正常展示邏輯然后可以使用對數(shù)據(jù)進(jìn)行預(yù)處 兩行css如下: .waterfall-container { /*分幾列*/ column-count: 2; } .w...

    TZLLOG 評論0 收藏0

  • 真的！！！兩行css代碼實現(xiàn)瀑布流，html,css最簡單的瀑布流實現(xiàn)方式且沒有缺點！

    摘要：兩行如下分幾列不留白，不知道什么意思可以取消這個樣式試試列間距，可有可無，默認(rèn)效果圖如下說明不存在一邊列表過長問題，很均勻，沒有缺點抱歉有坑但可以一鏈代碼解決這個列表顯示順序是左邊右邊，不符合正常展示邏輯然后可以使用對數(shù)據(jù)進(jìn)行預(yù)處 兩行css如下: .waterfall-container { /*分幾列*/ column-count: 2; } .w...

    wangjuntytl 評論0 收藏0

  • 瀑布流之實例進(jìn)階

    摘要：瀑布流也應(yīng)該算是流行幾年了吧。開始刷新的設(shè)置就很簡單了，瀑布流刷新只和一個事件有關(guān)，即，主要的算法即，當(dāng)頁面滑動到最低高度的時候開始加載節(jié)點并且添加，當(dāng)然，節(jié)點添加的個數(shù)是不固定的。這時候，就需要獲取實際尺寸然后進(jìn)行一個計算才行。 瀑布流也應(yīng)該算是流行幾年了吧。首先是由Pinterest掀起的浪潮，然后國內(nèi)設(shè)計如雨后春筍般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不過最近涉黃，...

    Baoyuan 評論0 收藏0

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

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

    MangoGoing 評論0 收藏0

發(fā)表評論

0條評論

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