瀑布流布局

Posted 2020-10-24 ygming

前言

完成一个动漫人物的瀑布流布局，分别通过原生javascript、Css3和Jquery方式实现。
首先是使用JavaScript。

一、创建基本框架

1 html结构

<main>                    //便于以后进行 相对定位
    <div class="wrap">    //为了方便设置图片和图片之间样式+绝对定位
      <div class="pic">   //包裹图片，设置单个图片的样式
        <img src="img/1.jpg" alt="图片1">
      </div>
    </div> 
</main>

2 CSS基本样式

*{                       /* 简单全局重置 */
  margin: 0;
  padding: 0;
}

main{
  position: relative;    /*相对布局*/
}

.wrap{
  padding: 15px 0 0 15px;  /*设置内边距，便于以后JS计算高度*/
}

.pic{
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;          /*设置边框圆角 */
  box-shadow: 0 0 6px #ccc;  /*水平、垂直偏移；模糊度；颜色*/
}

.pic img{
  width: 162px;    /*瀑布流特点，图片等宽不等高 */
  height: auto;
}

二、设置图片的定位 和 排序

1 设置列数和main的宽度

window.onload=function(){
  waterfall("main",".wrap");
}

function waterfall(parent,box){
  var oneparent = document.querySelector(parent);   //获取main元素
  
  //S1 获取main元素里面的所有 类warp元素
  var boxs = oneparent.querySelectorAll(box);    
  
  //S2 计算整个页面显示的列数；（页面宽/每列的盒子wrap宽）
  var oneboxwidth = boxs[0].offsetWidth;    //每列的盒子wrap宽
  var cols = Math.floor(document.documentElement.clientWidth / oneboxwidth) ; //获取 整数列数
  
  //S3 设置main的 固定宽度
  oneparent.style.cssText = ‘width:‘ + (oneboxwidth * cols)+‘px; margin:0 auto‘;
}

2 获取第一列图片的高度

window.onload=function(){
  waterfall("main",".wrap");
}

function waterfall(parent,box){
  var oneparent = document.querySelector(parent);   //获取main元素
  
  // 获取main元素里面的所有 类warp元素
  var boxs = oneparent.querySelectorAll(box);    
  ......
  ......
  //获取第一列图片的高度
  //S1 存放数据的 数组
  var boxsHeightArry = [];
  //S2 获取图片高度并存放
  for (var i=0; i<boxs.length; i++){
    if(i < cols){
      boxsHeightArry.push(boxs[i].offsetHeight);
    }
  }
  console.log(boxsHeightArry);
}

3 绝对定位，把以后的图片，都放到第一行最矮的下方

 //S1 存放数据的 数组
  var boxsHeightArry = [];
  //S2 获取图片高度并存放
  for (var i=0; i<boxs.length; i++){
    if(i < cols){
      boxsHeightArry.push(boxs[i].offsetHeight);
    }else{
      //S1 获取第一行的最小值&索引值
      minBoxHeight = Math.min.apply(null,boxsHeightArry);
      minBoxHeightIndex = boxsHeightArry.indexOf(minBoxHeight);
      //S2 调试   console.log( minBoxHeightIndex);
      //S3 设置第二行及以后行 图片的绝对定位位置
       boxs[i].style.position = "absolute";
      boxs[i].style.top = minBoxHeight + ‘px‘;
      boxs[i].style.left = oneboxwidth * minBoxHeightIndex + ‘px‘;
    }
  }

4 每次循环时都增加后放的图片的高度，从而改变数组里最矮的值

else{ 
      //S1 获取第一行的最小值&索引值
      minBoxHeight = Math.min.apply(null,boxsHeightArry);
      minBoxHeightIndex = boxsHeightArry.indexOf(minBoxHeight);
      //S2 调试 console.log( minBoxHeightIndex);

      //S3 设置第二行及以后行图片的 绝对定位位置
      boxs[i].style.position = "absolute";
      boxs[i].style.top = minBoxHeight + ‘px‘;
 // boxs[i].style.left = oneboxwidth * minBoxHeightIndex + ‘px‘;
    boxs[i].style.left = boxs[minBoxHeightIndex].offsetLeft + ‘px‘;

 //从第二行开始，每次循环时都增加后放的图片的高度，从而改变数组里最矮的值
      boxsHeightArry[minBoxHeightIndex] += boxs[i].offsetHeight;
}

四 Reference

??1 js改变css样式的三种方法;