瀑布流布局

通过js计算绝对定位坐标实现

效果图

Snip20190420_1.png

这是常用的方法，通过计算得出下一个盒子定位的坐标，比较灵活，横排列和竖排列都能实现

html代码

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12

css代码

ul{
    position: relative;
    height: 1000px;
    padding: 0px;
}

ul li{
    position: absolute;
    padding: 24px 32px 32px 32px;
    width: 372px;
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
    margin-right: 18px;
    margin-bottom: 18px;
    border-radius: 8px;
}

ul li:nth-child(1){
    height: 200px;
}
ul li:nth-child(2){
    height: 300px;
}
ul li:nth-child(3){
    height: 100px;
}
ul li:nth-child(4){
    height: 250px;
}
ul li:nth-child(5){
    height: 80px;
}
ul li:nth-child(6){
    height: 400px;
}
ul li:nth-child(7){
    height: 200px;
}
ul li:nth-child(8){
    height: 120px;
}
ul li:nth-child(9){
    height: 200px;
}
ul li:nth-child(10){
    height: 150px;
}
ul li:nth-child(11){
    height: 80px;
}
ul li:nth-child(12){
    height: 400px;
}

js代码

// 瀑布流布局
;(function () {
    const ul = document.querySelector('.question-box ul'),   // ul盒子
          liList = document.querySelectorAll('.question-box ul li'),    // li
          ulHeight = ul.clientHeight,  // 瀑布流盒子到高度
          liMarginBottom = 18,   // li的下外边距
          liMarginRight = 18,    // li的右外边剧
          liWidth = 372 // li的宽
    // 用来存储当前定位信息
    let position = {
        top: 0,
        left: 0
    }
    // 遍历li进行定位布局
    liList.forEach((li, i) => {
        li.style.top = position.top + 'px'
        li.style.left = position.left + 'px' 
        // li.innerText = i + '  ' + 'top: ' + position.top + ' left: ' + position.left  
        if (i == liList.length - 1) {
            return
        }   
        // 保证高度能容下下一个盒子 如果不能则换列  
        if (position.top < (ulHeight - li.clientHeight - liMarginBottom - liList[i + 1].clientHeight)){
            position.top += li.clientHeight + liMarginBottom
        } else {
            position.left += liWidth + liMarginRight
            position.top = 0
        }
    })
})()

css3方式实现

效果图

Snip20190420_2.png

css3实现 老版本的ie游览器不支持 且只能实现竖排列
重要属性
1、column-count 父元素中设置 规定有几列
2、column-width 父元素中设置 规定列宽
3、column-gap 父元素中设置 规定列间隙
4、break-inside: avoid; 子元素中设置 避免元素内部断行并产生新列
其中子元素的margin-bottom要手动设置

html代码

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12

css代码

ul{
    height: 1000px;
    padding: 0px;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 18px;
    -webkit-column-gap: 18px;
    column-gap: 18px;
}

ul li{
    padding: 24px 32px 32px 32px;
    width: 372px;
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
    margin-bottom: 18px;
    border-radius: 8px;
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

ul li:nth-child(1){
    height: 200px;
}
ul li:nth-child(2){
    height: 300px;
}
ul li:nth-child(3){
    height: 100px;
}
ul li:nth-child(4){
    height: 250px;
}
ul li:nth-child(5){
    height: 80px;
}
ul li:nth-child(6){
    height: 400px;
}
ul li:nth-child(7){
    height: 200px;
}
ul li:nth-child(8){
    height: 120px;
}
ul li:nth-child(9){
    height: 200px;
}
ul li:nth-child(10){
    height: 150px;
}
ul li:nth-child(11){
    height: 80px;
}
ul li:nth-child(12){
    height: 400px;
}