瀑布流布局

Posted 2020-10-24 ygming

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了瀑布流布局相关的知识，希望对你有一定的参考价值。

前言

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

一、检测是否满足数据块加载的条件

1 创建判断函数

function checkScrollSlide(){
  var Boxs = document.getElementsByClassName(‘wrap‘);
  var lastBox= Boxs[Boxs.length-1]; //获取最后一张图片的 div块
  // console.log(lastBox);  调试
  
  //最后一张图片 距页面顶部的高度+1/2图片高
  var lastBoxHeight = lastBox.offsetTop + Math.floor(lastBox.offsetHeight/2) 
  //页面已滚动高度+可视区 
  var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
  var cliHeight = document.documentElement.clientHeight || document.body.clientHeight;
  //判断大小，当小于时返回true加载数据块
  return lastBoxHeight<(scrolltop + cliHeight);
}

二、模拟获取后台数据

dataget = {"data":[{"src":‘img/1.jpg‘},{"src":‘img/2.jpg‘},{"src":‘img/3.jpg‘},{"src":‘4.jpg‘}]};

三、把数据块渲染到页面尾部，并正确定位

1 渲染数据块

window.onscroll=function(){
    if (checkScrollSlide()){  //S1 判断满足什么条件，才触发加载事件—见下
      //S3 把数据块渲染到页面尾部
      var oneparent = document.querySelector(‘main‘);
      for (var i=0; i<dataIn.data.length; i++){
        var crbox = document.createElement(‘div‘);
        crbox.className = ‘wrap‘;   //创建元素的类名；
        oneparent.appendChild(crbox); //把 wrap盒子 添加到 main下面

        var crpic = document.createElement(‘div‘);
        crpic.className = ‘pic‘;
        crbox.appendChild(crpic);  //把 pic盒子 添加到 wrap下面

        var crimg = document.createElement(‘img‘);
        crimg.src = "img/" + dataIn.data[i].src; //创建图片src属性值
        crpic.appendChild(crimg);
      }
    }
  }