cs3超简单实现瀑布流布局

废话少说，coding....

html部分

<div class="pubu">
      <div class="p p1">
        243789793
      </div>
      <div class="p p2">
        45634058906834
      </div>
      <div class="p p3">
        563456346
      </div>
      <div class="p p4">
        "市解放路所经历的"
      </div>
      <div class="p p5">
        "的减肥了困难八年级看完"
      </div>
      <div class="p p6">
        "大家啊发来看精灵盛典啊"
      </div>
    </div>

　　css部分

.pubu {
    backgroud: #ddd;
　　/*分2列*/
    column-count: 2;
　　-moz-column-count:2; /*firefox*/
　　-webkit-column-count:2;/*safari chrome*/
  }

  .p {
    break-inside: avoid;
  }

  .p1 {
    background: #0ba360;
    with: 50%;
    height: 50px;
  }

  .p2 {
    background: #0c3483;
    with: 50%;
    height: 70px;
  }

  .p3 {
    background: #00a0e9;
    with: 50%;
    height: 90px;
  }

  .p4 {
    background: #1B5E20;
    with: 50%;
    height: 20px;
  }

  .p5 {
    background: #3C4858;
    with: 50%;
    height: 60px;
  }

  .p6 {
    background: #6a00ff;
    with: 50%;
    height: 100px;
  }

　　效果图

 

 什么？发现分布顺序不对？

【1，2，3，4，5，6】；左边分布是【1，3，5】；右边【2，4，6】；
很简单，通过js处理下，把【1，2，3，4，5，6】处理成【1，3，5，2，4，6】；

大致逻辑如下：

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

// 使用reduce函数接受一个初始值{ 0: [], 1: [], length: 2 },
// 初始值包含两个空数组，和一个数组长度(Array.from方法要求将对象转数组时对象内要有这个属性)
// 在reduce函数内根据索引做余2判断，因为分两，余0的加入第一个数组，余1的加入第二个数组
// 最后reduce返回遍历完的对象 {0:[1,3,5],1:[2,4,6],length:2}
// 使用Array.from({0:[1,3,5],1:[2,4,6],length:2}) 得到 数组 [[1,3,5],[2,4,6]]
// 解构数组 使用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)