響應式瀑布流程式碼例項

admin發表於2017-04-15

分享一段程式碼例項，它實現了響應式瀑布流效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css" media="screen">
#wrap li {
  list-style: none;
  margin: 10px;
  border: 2px solid gray;
  position: absolute;
  font-size: 100px;
  text-align: center;
  width: 200px;
  transition: all .5s;
}
</style>
</head>
<body>
<ul id="wrap"></ul>
<script type="text/javascript">
  var wrap = document.querySelector("#wrap");
  //生成隨機高度
  function rand(min, max) {
    return parseInt(Math.random() * (max - min) + min);
  }
  var colsArr = []; //定義一個陣列 存放每一列的高度
  //得到當前視窗下的總列數
  function getCols() {
    colsArr = [];
    var wWidth = document.body.clientWidth;
    //得到總列數
    var cols = parseInt(wWidth / (200 + 10));
    for (var i = 0; i < cols; i++) {
      colsArr.push(0);
    }
  }
  getCols();
  //建立一個LI  追加到父元素中
  function createLi(index) {
    var li = document.createElement("li");
    var num = rand(100, 200);
    li.style.height = num + "px";
    li.style.lineHeight = num + "px";
    li.innerHTML = index;
    wrap.appendChild(li);
    setPos(li);
  }
 
  //計算LI所在的實際位置
  function setPos(li) {
    //初始下標為0
    var minIndex = 0;
    var minHeight = colsArr[minIndex];
    //colsArr = [0,0,0,]
    for (var i = 0; i < colsArr.length; i++) {
      if (minHeight > colsArr[i]) {
        minIndex = i;
        minHeight = colsArr[i];
      }
    }
    li.style.top = minHeight + "px";
    li.style.left = minIndex * (200 + 10) + "px";
    colsArr[minIndex] += li.clientHeight;
  }
  var count = 1;
  function _run(num) {
    num ? num : num = 20;
    for (var i = 0; i < num; i++) {
      createLi(count++);
    }
  }
  _run();
  //監聽滾動事件
  window.onscroll = function () {
    //得到滾動距離
    var sHeight = document.documentElement.scrollTop || document.body.scrollTop;
    //得到總的高度 含滾動長的距離
    var aHeight = document.body.scrollHeight;
    //得到頁面的視口高度
    var cHeight = document.documentElement.clientHeight || document.body.clientHeight;
    console.log(sHeight, aHeight, cHeight);
    //如果視口高度 + 滾動距離 超過了 總高度  則追加下X條
    if (cHeight + sHeight >= aHeight) {
      _run(30);
    }
  }
  window.onresize = function () {
    getCols();
    var lis = document.querySelectorAll("li");
    for (var i = 0; i < lis.length; i++) {
      setPos(lis[i]);
    }
  }
</script>
</body>
</html>

相關文章