解析javascript瀑布流原理实现图片滚动加载

前端之家收集整理的这篇文章主要介绍了解析javascript瀑布流原理实现图片滚动加载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先科普下瀑布流吧

瀑布流

,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格,像美丽说、淘宝网都有使用。

这是我实现的一个效果,就是怎么滚动都加载不玩。就跟瀑布一样流啊流!

这里的实现方式我们只说Js实现方法

实现原理:

对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度 3 最小列数 ,得到列数后,用一个数组存放盒子所有高度,找出最小高度。之后根据序列号更新高度;看着有些拗口,实现起来就很简单了。

对于滚动加载:即滚动到哪个高度后,需要去加载数据,其实这个就是列的最小高度值,这样当前滚动值和最小高度值比较一下即可判断出来,是否要触发加载数据;就是写一个函数,用来判断是否达到加载图片条件,如果达到,就开始加载。比如获得最后一张图片的offsetTop,可视区高度,滚动距离,也就是当图片的offsetTop小于可视区高度和滚动距离之和的情况下,此时就应该加载了,不过条件可以随便定,也可以等滚动到图片的一半时候在触发加载条件,如图所示:

先上HTML CSS代码

<Meta charset="UTF-8"> waterfall
Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

Box"> 白超华-博客

JS代码,每行都有注释

后台数据 的一个JSON格式的文件 "data":[ {"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},] }; window.onscroll = function(){ if(checkScroll()){ //判断是否具备滚动加载得条件 var oParent = document.getElementById('container'); for(var i=0; iBox){ var oParent = document.getElementById(parent);//获取父级对象 var aBox = getByClass(oParent,Box);//获取所有class为pin的盒子的集合 var BoxWidth = aBox[0].offsetWidth;//获取一个盒子的宽 var pageWidth = document.body.clientWidth||document.documentElement.clientWidth;//获取可视区宽 var cols = Math.floor(pageWidth/BoxWidth);//获得列数 var arrH = [];//用于存放盒子的高

for(var i=0; i<aBox.length; i++){
if(i<cols){//当小于第一列个数的时候
arrH.push(aBox[i].offsetHeight);
} else {
var minH = Math.min.apply(null,arrH);//得到数组中盒字的最小高度minH;
var index = getMinIndex(arrH,minH);

aBox[i].style.position = 'absolute';//设置绝对定位
aBox[i].style.top = minH+'px';//设置top,就是最小高度
aBox[i].style.left = aBox[0].offsetWidthindex+'px';//设置left,就是一个盒子的宽index索引数
arrH[index]+=aBox[i].offsetHeight; //更新新添加盒字后的列高
}
}
}
//通过父级获取class
function getByClass(parent,classname){
var aClass = parent.getElementsByTagName('*');
var arr = [];

for(var i=0; i<aClass.length; i++){
if(aClass[i].className == classname){
arr.push(aClass[i]);
}
}
return arr;
}
//最小值的索引index
function getMinIndex(arr,val){
for( i in arr){
if(arr[i] == val){
return i;
}
}
}
//
function checkScroll(){
var oParent = document.getElementById('container');
var aBox = getByClass(oParent,'pin');
var lastBoxHeight = aBox[aBox.length-1].offsetTop;// 当滚到到这个距离时候就开始加载
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容的滚动距离
var documentHeight = document.documentElement.clientHeight; //页面高度
if(lastBoxHeight<scrollTop+documentHeight){
return true;
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文链接:https://www.f2er.com/js/49733.html
javacript图片滚动加载javascript瀑布流

猜你在找的JavaScript相关文章