瀑布流布局

Posted 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);
      }
    }
  }

2 正确放置后加载的 图片位置

waterfall("main",".wrap");

四 Reference

??1 Element.lastElementChild;

以上是关于瀑布流布局的主要内容,如果未能解决你的问题,请参考以下文章

[Web] 简单瀑布流布局实现

h5瀑布流布局会留白

H5 图片瀑布流布局 - vue

WPF如何实现瀑布流布局?

前端之瀑布流布局(多种实现方案)

用css3的 clomus 布局 怎么写瀑布流