瀑布流

最新推荐文章于 2024-01-20 15:45:35 发布

dada_master

最新推荐文章于 2024-01-20 15:45:35 发布

阅读量406

点赞数

分类专栏： javascript 文章标签： html 布局 javascript

本文链接：https://blog.csdn.net/dada_master/article/details/76238344

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS瀑布流

HTML瀑布流布局

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/waterfall.js"/></script>

<title></title>
<style type="text/css">
    *{padding: 0;margin:0;}
    #main{
        position: relative;
    }
    .box{
        padding: 15px 0 0 15px;
        float:left;
    }
    .pin{
        padding: 10px;
        border:1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }
    .box img{
        width:162px;
        height:auto;
    }
</style>
</head>
<body>
<div id="main">
    <div class="box">
        <div class="pin">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pin">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pin">
            <img src="./images/3.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pin">
            <img src="./images/4.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pin">
            <img src="./images/5.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pin">
            <img src="./images/6.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pin">
            <img src="./images/7.jpg"/>
        </div>
    </div>
  <div class="box">
        <div class="pin">
            <img src="./images/8.jpg"/>
        </div>
    </div>
  <div class="box">
      <div class="pin">
            <img src="./images/9.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/10.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/11.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/12.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/13.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/14.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/15.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/16.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/17.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/18.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/19.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/20.jpg"/>
        </div>
    </div>
  <div class="box">
  <div class="pin">
            <img src="./images/21.jpg"/>
        </div>
    </div>
</div>
</body>
</html>

js实现瀑布流布局

window.οnlοad=function(){
  waterfall('main','box');

}
function waterfall(parent,box) {
  // 获取mian下的所有box元素
  var oParent=document.getElementById(parent);
  var oBoxs=getByClass(oParent,box)
  console.log(oBoxs.length)
  //计算页面的列数
  var oBoxW=oBoxs[0].offsetWidth;
  var clos=Math.floor(document.documentElement.clientWidth/oBoxW);
  //设置class=main的宽
  oParent.style.cssText='width:'+oBoxW*clos+'px;margin:0 auto';
  //找到最小的高度
  var hArr=[];
  for(var i=0;i<oBoxs.length;i++){
    if(i<clos){
      //第一行开始的高度盒子添加到hArr中,并且不断添加新的高度，固定列数
      hArr.push(oBoxs[i].offsetHeight)
    }else{
      //当前oBoxs中的最小高度
      var minH=Math.min.apply(null,hArr)
      //最小高度oBoxs的索引，index的长度为一行中的图片个数
      var index=getMinhIndex(hArr,minH)
      //改变oBoxs的位置
      oBoxs[i].style.top=minH+'px';
      oBoxs[i].style.position='absolute';
      oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
      //添加到从第一行开始的数组中
      hArr[index]+=oBoxs[i].offsetHeight;
    }
  }
  console.log(oBoxs)
}
function getByClass(oParent,clsName) {
  var oElements=oParent.children;
  var boxArr=[];
  for(var i=0;i<oElements.length;i++){
    if(oElements[i].className==clsName){
      boxArr.push(oElements[i])
    }
  }
  return boxArr;
}
function getMinhIndex(arr,minH) {
  for(var i in arr){
    if(arr[i]==minH){
      return i
    }
  }
}

利用onscroll实现瀑布流

不断加载，实现一直处于加载的底部

滚动加载事件的条件：当到达最后一张图片的时候，也就是蓝线的距离小于黑线的距离，执行加载！

蓝线的距离：页面顶部到最后一个图片高度一半的距离

黑线的距离：top+documentElement.clientHeight(浏览器可视窗口的距离)

下面的情况不允许加载：蓝线.height>黑线.height

//滚动加载的条件
function checkScrollSlide() {
  var oParent=document.getElementById('main')
  var oBoxs=getByClass(oParent,'box')
  var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2)
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容性
  var documentH=document.documentElement.clientHeight;//页面高度
  return (lastBoxH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
  console.log(documentH)
}

创建window.οnscrοll=function(){},并将模拟的后台加载数据dataInt放置在页面底部

var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
window.οnscrοll=function(){
    if(checkScrollSlide) {
    //将数据块渲染到当前页面的尾部
    for (var i = 0; i < dataInt.data.length; i++) {
      //首先找到父对象
      var oParent = document.getElementById('main');
      var oBox = document.createElement('div');
      oBox.className = 'box';
      oParent.appendChild(oBox);
      var oPin = document.createElement('div');
      oPin.className = 'pin';
      oBox.appendChild(oPin);
      var oImg = document.createElement('img');
      oImg.src = './images/' + dataInt.data[i].src;
      oPin.appendChild(oImg);
    }
      waterfall('main','box');
  }
}