思路与问题:
1、瀑布流中的图片等宽不等高,从第二行起,图片优先加载到第一行高度最短的图片下然后更新的高度
2、图片加载的问题:a.是否还有需要加载的图片,没有就不执行添加dom元素(这里要设置每次加载几张图片)在这里可以实现加载图片不重复
b. 滚动条往回滚动也不需要触发加载图片
c.图片都加载完成后加上window.οnscrοll=null;来移除滚动条滚动事件
<div id="main">
<div class="box">
<div class="pic">
<img src="images/1.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.png" />
</div>
</div>
</div>
js实现
<script type="text/javascript">
window.οnlοad=function(){
waterfall('main','box');//对main下的box进行瀑‘布流
//json:这里data是dataInt的属性,src是data的属性,调用属性时之间是 对象.属性
var dataInt={"data":[{'src':'10.png'},{'src':'9.png'},{'src':'8.png'}]};//真正的数据应是从后台获取,这里手动模拟
window.οnscrοll=function(){//拖动滚动条时触的函数
if(checkScrollSide()){//如果满足触发条件,执行下列代码
//将数据渲染到当前页面的尾部
var oParent=document.getElementById('main');
for(var i=0;i<dataInt.data.length;i++){
//将完整的box创建在main中
var oBox=document.createElement('div');
oBox.className="box";
oParent.appendChild(oBox);
var oPic=document.createElement('div');
oPic.className="pic";
oBox.appendChild(oPic);
var oImg=document.createElement('img');
oImg.src="images/"+dataInt.data[i].src;//从json中获取路径
oPic.appendChild(oImg);
}
waterfall('main','box');//新加载的图片并没有按waterfall排列,因此在这再次调用waterFall
}
}
}
function waterfall(parent,box){
//将main下所有class为box的元素取出
var oParent=document.getElementById('main');
var oBoxs=getByClass(oParent,box);
//计算整个页面显示的列数(页面宽/box宽)
var oBoxW=oBoxs[0].offsetWidth;//offsetWidth包括padding
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);//取整、页面可视区的宽度
//设置main的宽度
oParent.style.cssText="width:"+oBoxW*cols+'px';//cssText使附加的css如外联样式写法一样
//将除第一行的图片优先加在第一行中高度最小的图片下;
var hArr=[]//存放每一列高度的数组
for(var i=0;i<oBoxs.length;i++){
if(i<cols){//将第一行的图片的高度分别存入hArr
hArr.push(oBoxs[i].offsetHeight);
}else{//将下一个box放入第一行中高度最小的图片下;
var minH=Math.min.apply(null,hArr);//Math.min(中间放的是一组数据,不能是数组),Math.min.apply()可以解决数组,apply方法可以改变数组中this的指向
var index=getMinhIndex(hArr,minH);//获取高度最小的图片的索引值
oBoxs[i].style.cssText="position:absolute; top:"+minH+'px;'//将box定位在高度最小的图片下方
oBoxs[i].style.left=oBoxW*index+'px';//法二:=oBoxs[index].offsetLeft+'px';
hArr[index]+=oBoxs[i].offsetHeight;//更新一下加完新图片后的列的高度
}
}
}
function getByClass(parent,clsName){//根据class获取元素
var boxArr=new Array();//定义一个数组,用来储存获取到的所有class为box的元素
var oElements= parent.getElementsByTagName("*");//获取parent下的所有元素
for(var i=0;i<oElements.length;i++){//对获取到的所有元素进行循环
if(oElements[i].className==clsName){//如果有元素的class与给定的参数clsName一样
boxArr.push(oElements[i]);//将该元素加到boxArr数组中
}
}
return boxArr;
}
function getMinhIndex(arr,val){//获取arr中高为val的索引值
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
//检测是否具备加载的条件(条件:当最后一个box出现一半时)
function checkScrollSide(){//返回一个布尔值
var oParent=document.getElementById('main');
var oBoxs=getByClass(oParent,'box');
//获取最后一个box距顶端的距离(包括卷起的高度)+该box的一半高度
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offseHeight/2);
//滚动条滚动的距离+可视区的高度
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop+document.body.clientHeight||document.documentElement.clientHeight;
return (lastBoxH<scrollTop)?true:false;
}
</script>
jq实现
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
waterfall();
var dataInt={"data":[{'src':'10.png'},{'src':'9.png'},{'src':'8.png'}]};
$(window).scroll(function(){
if(checkScrollSide){
$.each(dataInt.data,function(key,value){//遍历json
var oBox=$('<div>').addClass("box").appendTo($('#main'));//$('<div>')就表示创建一个<div></div>
var oPic=$('<div>').addClass("pic").appendTo($(oBox));
//此时value获取的是object对象(js原生对象),依旧不能直接用jq方法,此时value为{src:"0.jpg"}、{src:"1.jpg"}...
$('<img>').attr('src','images/'+$(value).attr('src')).appendTo($(oPic));//$(value).attr('src')即获取value中属性为src的值
})
waterfall();
}
})
})
function waterfall(){
var $boxs=$('#main>div');//获取id为main下的所有div
var w=$boxs.eq(0).outerWidth();//获取box的宽(outerWidth包括padding,border)
var cols=Math.floor($(window).width()/w);//求列数
$('#main').width(w*cols);//设main的宽
var hArr=[];
$boxs.each(function(index,value){//$.each相当于for,遍历元素,index为遍历元素的索引,value遍历的元素得的docm对象
var h=$boxs.eq(index).outerHeight();//获取当前高度
if(index<cols){//如果值小于列数
hArr[index]=h;//并加到hArr数组中
}else{
var minH=Math.min.apply(null,hArr);//获取最小高度
var minHIndex=$.inArray(minH,hArr);//$.inArray()方法:第一个参数为判断谁,第二个参数为在那个数组判断,得到最小高度的索引
$(value).css({//value遍历的元素得的docm对象,docm对象不能使用jq方法,只有jq对象才能使用jq方法。$(value)可将docm对象转变为jq对象
'position':'absolute',
'top':minH+'px',
'left':minHIndex*w+'px'
});
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
})
}
function checkScrollSide(){
var $lastBox=$("#main>div").last();
//获取最后一个box距顶端的距离(包括卷起的高度)+该box的一半高度
var lastBoxH=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
//滚动条滚动的距离+可视区的高度
var scrollTop=$(window).scrollTop()+$(window).height();
return (lastBoxH<scrollTop)?true:false;
}
</script>
css3多栏布局实现
<style type="text/css">
*{margin:0; padding:0;}
/*column-width:设置对象每列的宽度(浏览器自动用可视区的宽除以设置的列宽)
column-count:设置对象的列数(一般两者写其中一个即可)
column-rule:设置对象的列与列之间边框的厚度(culumn-rule-width),样式(culumn-rule-style),颜色(culumn-rule-color)
column-gap:设置对象列与列之间的间隙,不能是负值(当前浏览器窗口的宽/定义的列宽,再将剩余的宽平均分配,所以设置的gap不一定起作用)
*/
#main{
-webkit-column-width:237px;
-moz-column-width:237px;
-mz-column-width:237px;
-o-column-width:237px;
}
.box{padding:15px 0 0 15px;}
.pic{ width:200px; border:1px #ccc solid; border-radius:5px; box-shadow:0 0 5px #ccc;padding:10px;}
.pic img{ width:200px; display:block; height:auto;}
</style>
1、瀑布流中的图片等宽不等高,从第二行起,图片优先加载到第一行高度最短的图片下然后更新的高度
2、图片加载的问题:a.是否还有需要加载的图片,没有就不执行添加dom元素(这里要设置每次加载几张图片)在这里可以实现加载图片不重复
b. 滚动条往回滚动也不需要触发加载图片
c.图片都加载完成后加上window.οnscrοll=null;来移除滚动条滚动事件
<div id="main">
<div class="box">
<div class="pic">
<img src="images/1.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.png" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.png" />
</div>
</div>
</div>
js实现
<script type="text/javascript">
window.οnlοad=function(){
waterfall('main','box');//对main下的box进行瀑‘布流
//json:这里data是dataInt的属性,src是data的属性,调用属性时之间是 对象.属性
var dataInt={"data":[{'src':'10.png'},{'src':'9.png'},{'src':'8.png'}]};//真正的数据应是从后台获取,这里手动模拟
window.οnscrοll=function(){//拖动滚动条时触的函数
if(checkScrollSide()){//如果满足触发条件,执行下列代码
//将数据渲染到当前页面的尾部
var oParent=document.getElementById('main');
for(var i=0;i<dataInt.data.length;i++){
//将完整的box创建在main中
var oBox=document.createElement('div');
oBox.className="box";
oParent.appendChild(oBox);
var oPic=document.createElement('div');
oPic.className="pic";
oBox.appendChild(oPic);
var oImg=document.createElement('img');
oImg.src="images/"+dataInt.data[i].src;//从json中获取路径
oPic.appendChild(oImg);
}
waterfall('main','box');//新加载的图片并没有按waterfall排列,因此在这再次调用waterFall
}
}
}
function waterfall(parent,box){
//将main下所有class为box的元素取出
var oParent=document.getElementById('main');
var oBoxs=getByClass(oParent,box);
//计算整个页面显示的列数(页面宽/box宽)
var oBoxW=oBoxs[0].offsetWidth;//offsetWidth包括padding
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);//取整、页面可视区的宽度
//设置main的宽度
oParent.style.cssText="width:"+oBoxW*cols+'px';//cssText使附加的css如外联样式写法一样
//将除第一行的图片优先加在第一行中高度最小的图片下;
var hArr=[]//存放每一列高度的数组
for(var i=0;i<oBoxs.length;i++){
if(i<cols){//将第一行的图片的高度分别存入hArr
hArr.push(oBoxs[i].offsetHeight);
}else{//将下一个box放入第一行中高度最小的图片下;
var minH=Math.min.apply(null,hArr);//Math.min(中间放的是一组数据,不能是数组),Math.min.apply()可以解决数组,apply方法可以改变数组中this的指向
var index=getMinhIndex(hArr,minH);//获取高度最小的图片的索引值
oBoxs[i].style.cssText="position:absolute; top:"+minH+'px;'//将box定位在高度最小的图片下方
oBoxs[i].style.left=oBoxW*index+'px';//法二:=oBoxs[index].offsetLeft+'px';
hArr[index]+=oBoxs[i].offsetHeight;//更新一下加完新图片后的列的高度
}
}
}
function getByClass(parent,clsName){//根据class获取元素
var boxArr=new Array();//定义一个数组,用来储存获取到的所有class为box的元素
var oElements= parent.getElementsByTagName("*");//获取parent下的所有元素
for(var i=0;i<oElements.length;i++){//对获取到的所有元素进行循环
if(oElements[i].className==clsName){//如果有元素的class与给定的参数clsName一样
boxArr.push(oElements[i]);//将该元素加到boxArr数组中
}
}
return boxArr;
}
function getMinhIndex(arr,val){//获取arr中高为val的索引值
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
//检测是否具备加载的条件(条件:当最后一个box出现一半时)
function checkScrollSide(){//返回一个布尔值
var oParent=document.getElementById('main');
var oBoxs=getByClass(oParent,'box');
//获取最后一个box距顶端的距离(包括卷起的高度)+该box的一半高度
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offseHeight/2);
//滚动条滚动的距离+可视区的高度
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop+document.body.clientHeight||document.documentElement.clientHeight;
return (lastBoxH<scrollTop)?true:false;
}
</script>
jq实现
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
waterfall();
var dataInt={"data":[{'src':'10.png'},{'src':'9.png'},{'src':'8.png'}]};
$(window).scroll(function(){
if(checkScrollSide){
$.each(dataInt.data,function(key,value){//遍历json
var oBox=$('<div>').addClass("box").appendTo($('#main'));//$('<div>')就表示创建一个<div></div>
var oPic=$('<div>').addClass("pic").appendTo($(oBox));
//此时value获取的是object对象(js原生对象),依旧不能直接用jq方法,此时value为{src:"0.jpg"}、{src:"1.jpg"}...
$('<img>').attr('src','images/'+$(value).attr('src')).appendTo($(oPic));//$(value).attr('src')即获取value中属性为src的值
})
waterfall();
}
})
})
function waterfall(){
var $boxs=$('#main>div');//获取id为main下的所有div
var w=$boxs.eq(0).outerWidth();//获取box的宽(outerWidth包括padding,border)
var cols=Math.floor($(window).width()/w);//求列数
$('#main').width(w*cols);//设main的宽
var hArr=[];
$boxs.each(function(index,value){//$.each相当于for,遍历元素,index为遍历元素的索引,value遍历的元素得的docm对象
var h=$boxs.eq(index).outerHeight();//获取当前高度
if(index<cols){//如果值小于列数
hArr[index]=h;//并加到hArr数组中
}else{
var minH=Math.min.apply(null,hArr);//获取最小高度
var minHIndex=$.inArray(minH,hArr);//$.inArray()方法:第一个参数为判断谁,第二个参数为在那个数组判断,得到最小高度的索引
$(value).css({//value遍历的元素得的docm对象,docm对象不能使用jq方法,只有jq对象才能使用jq方法。$(value)可将docm对象转变为jq对象
'position':'absolute',
'top':minH+'px',
'left':minHIndex*w+'px'
});
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
})
}
function checkScrollSide(){
var $lastBox=$("#main>div").last();
//获取最后一个box距顶端的距离(包括卷起的高度)+该box的一半高度
var lastBoxH=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
//滚动条滚动的距离+可视区的高度
var scrollTop=$(window).scrollTop()+$(window).height();
return (lastBoxH<scrollTop)?true:false;
}
</script>
css3多栏布局实现
<style type="text/css">
*{margin:0; padding:0;}
/*column-width:设置对象每列的宽度(浏览器自动用可视区的宽除以设置的列宽)
column-count:设置对象的列数(一般两者写其中一个即可)
column-rule:设置对象的列与列之间边框的厚度(culumn-rule-width),样式(culumn-rule-style),颜色(culumn-rule-color)
column-gap:设置对象列与列之间的间隙,不能是负值(当前浏览器窗口的宽/定义的列宽,再将剩余的宽平均分配,所以设置的gap不一定起作用)
*/
#main{
-webkit-column-width:237px;
-moz-column-width:237px;
-mz-column-width:237px;
-o-column-width:237px;
}
.box{padding:15px 0 0 15px;}
.pic{ width:200px; border:1px #ccc solid; border-radius:5px; box-shadow:0 0 5px #ccc;padding:10px;}
.pic img{ width:200px; display:block; height:auto;}
</style>