瀑布流 支持动态加载新元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
height: auto;
width: 1000px;
outline: solid 1px red;
position: relative;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
</head>
<body>
<div class="wrap">
</div>
<script>
$.getJSON("img.json",function(data){
cascadeFlow(12,12,10,"wrap",data).init();//第一次加载时候调用init();
})
setTimeout(function(){ //以后动态加载调用的时候直接用creatOtherDom();
$.getJSON("img2.json",function(data){
cascadeFlow(12,12,10,"wrap",data).creatOtherDom();
})
},1500)
setTimeout(function(){
$.getJSON("img3.json",function(data){
cascadeFlow(12,12,10,"wrap",data).creatOtherDom();
})
},2500)
setTimeout(function(){
$.getJSON("img2.json",function(data){
cascadeFlow(12,12,10,"wrap",data).creatOtherDom();
})
},4500)
setTimeout(function(){
$.getJSON("img2.json",function(data){
cascadeFlow(12,12,10,"wrap",data).creatOtherDom();
})
},6500)
setTimeout(function(){
$.getJSON("img.json",function(data){
cascadeFlow(12,12,10,"wrap",data).creatOtherDom();
})
},8500)
setTimeout(function(){
$.getJSON("img3.json",function(data){
cascadeFlow(12,12,10,"wrap",data).creatOtherDom();
})
},10500)
function cascadeFlow(marginLeft,marginBottom,num,className,data){//插件执行函数
var cascadeFlow = {
json:{
marginLeft:marginLeft,//左右间距
marginBottom:marginBottom,//上下间距
num:num,//每行数量
className:className,//外层元素名称
data:data//每次传入的数据
},
init:function(){//初始化第一次加载的数据；
this.firstDefault();
this.creatDom();
},
imgHeightArr:[],//将高度保存到这个数组中
firstDefault:function(){//初始化第一行的元素
var name = "."+this.json.className;
var wrapWidth = $(name).width();//获取父容器的宽度；
var divWidth = (wrapWidth-(this.json.num-1)*this.json.marginLeft)/this.json.num; // 每个元素的宽度
var that = this;
var data = this.json.data;
for(var i = 0;i<that.json.num;i++){ //将第一行的图片渲染进去
var div = document.createElement("div");
div.className = "imgDiv";
div.style.width = divWidth+"px";
div.style.position = "absolute";
div.style.left = (divWidth+that.json.marginLeft)*i+"px";
var img = document.createElement("img");
img.src = data[i].src;
img.style.width = "100%";
img.style.display = "block";
div.appendChild(img);
$(name).append(div);
$(".imgDiv").eq(0).css({"z-index":5,"background":"white"});//将第一个元素层级调高，防止其他元素加载时对页面的影响；
}
that.checkFirstImg();
},
checkFirstImg:function(){ //检测第一行图片是否加载完毕
var name = "."+this.json.className;
var that = this;
var timer = setInterval(function(){
var flag = true;
$(".imgDiv").each(function(index,ele){
if($(ele).height()==0){
flag = false;
}
})
if(flag){
for(var i = 0;i<that.json.num;i++){
that.imgHeightArr.push($(".imgDiv").eq(i).height());
clearInterval(timer);
}
sessionStorage.setItem("imgHeightArr",that.imgHeightArr);
}
},50)
},
creatDom:function(){//创建第一次数据剩余的元素；
var name = "."+this.json.className;
var wrapWidth = $(name).width();//获取父容器的宽度；
var divWidth = (wrapWidth-(this.json.num-1)*this.json.marginLeft)/this.json.num; // 每个元素的宽度
var that = this;
var data = this.json.data;
for(var i = that.json.num;i<data.length;i++){
var div = document.createElement("div");
div.className = "imgDiv";
div.style.width = divWidth+"px";
div.style.position = "absolute";
var img = document.createElement("img");
img.src = data[i].src;
img.style.width = "100%";
img.style.display = "block";
div.appendChild(img);
$(name).append(div);
}
that.checkDom();
},
checkDom:function(){//检测第一次加载元素是否加载完；
var name = "."+this.json.className;
var wrapWidth = $(name).width();//获取父容器的宽度；
var divWidth = (wrapWidth-(this.json.num-1)*this.json.marginLeft)/this.json.num; // 每个元素的宽度
var that = this;
var timer2 = setInterval(function(){
var flag = true;
$(".imgDiv").each(function(index,ele){
if($(".imgDiv").height()==0){
flag = false;
}
})
if(flag){
for(var i = that.json.num;i<data.length;i++){
var minHeight = that.minHeightFn().minHeight;//寻找高度数组中的最小高度
var minHeightIndex = that.minHeightFn().minHeightIndex;//寻找高度数组中最小高度对应的Index值；
var domLeft = (divWidth+that.json.marginLeft)*minHeightIndex+"px";//元素left值
var domTop = minHeight+that.json.marginBottom+"px";//元素Top值
$(".imgDiv").eq(i).css({"left":domLeft,"top":domTop});
that.imgHeightArr[minHeightIndex] = minHeight+$(".imgDiv").eq(i).height()+that.json.marginBottom;//给高度数组中的最小值重新负赋值
clearInterval(timer2);
}
sessionStorage.setItem("imgHeightArr",that.imgHeightArr);//存入第一次加载完毕时候的高度数组；
sessionStorage.setItem("dataLength",data.length);//存入第一次渲染完后的图片数量；
}
},50)
},
creatOtherDom:function(){//创建新的加载的元素
var name = "."+this.json.className;
var wrapWidth = $(name).width();//获取父容器的宽度；
var divWidth = (wrapWidth-(this.json.num-1)*this.json.marginLeft)/this.json.num; // 每个元素的宽度
var that = this;
var data = this.json.data;
for(var i = 0;i<data.length;i++){
var div = document.createElement("div");
div.className = "imgDiv";
div.style.width = divWidth+"px";
div.style.position = "absolute";
var img = document.createElement("img");
img.src = data[i].src;
img.style.width = "100%";
img.style.display = "block";
div.appendChild(img);
$(name).append(div);
}
that.checkOtherDom();
},
checkOtherDom:function(){//检测其他元素是否加载完毕
var name = "."+this.json.className;
var wrapWidth = $(name).width();//获取父容器的宽度；
var divWidth = (wrapWidth-(this.json.num-1)*this.json.marginLeft)/this.json.num; // 每个元素的宽度
var arrImgHeightArr = (sessionStorage.getItem("imgHeightArr")).split(",");
var datalength = sessionStorage.getItem("dataLength")*1;
this.imgHeightArr = arrImgHeightArr;//更新函数的高度数组；
var that = this;
var timer2 = setInterval(function(){
var flag = true;
$(".imgDiv").each(function(index,ele){
if($(".imgDiv").height()==0){
flag = false;
}
})
if(flag){
for(var i = datalength;i<data.length+datalength;i++){
var minHeight = that.minHeightFn().minHeight;//寻找高度数组中的最小高度
var minHeightIndex = that.minHeightFn().minHeightIndex;//寻找高度数组中最小高度对应的Index值；
var domLeft = (divWidth+that.json.marginLeft)*minHeightIndex+"px";//元素left值
var domTop = minHeight+that.json.marginBottom+"px";//元素的Top值
$(".imgDiv").eq(i).css({"left":domLeft,"top":domTop});
that.imgHeightArr[minHeightIndex] = minHeight+$(".imgDiv").eq(i).height()+that.json.marginBottom;//给高度数组中的最小值重新负赋值
clearInterval(timer2);
}
sessionStorage.setItem("imgHeightArr",that.imgHeightArr);//每次运行完就存入新的高度数组；
sessionStorage.setItem("dataLength",datalength+data.length);//每次运行完就存入新的图片数量；
}
},50)
},
minHeightFn:function(){//寻找高度数组的最小高度值
var arr = this.imgHeightArr;
for(var i = 0;i<arr.length;i++){//将数组里面的字符串转化为数字；
arr[i] = arr[i]*1;
}
var minHeight = arr[0];
var minHeightIndex = 0;
for(var i = 0;i<arr.length;i++){
if(minHeight>arr[i]){
minHeight=arr[i]
}
}
for(var i = 0;i<arr.length;i++){
if(minHeight==arr[i]){
minHeightIndex=i;
}
}
return{
minHeightIndex:minHeightIndex,
minHeight:minHeight
}
}
}
return cascadeFlow;
}
</script>
</body>
</html>
浙公网安备 33010602011771号