部分html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<!-- <link rel="stylesheet" type="text/css" href="css/Pinterest.css"> -->
<!-- // <script type="text/javascript" src="js/Pinterest.js"></script> -->
<!-- <script type="text/javascript" src="js/jquery.js"></script>
// <script type="text/javascript" src="js/Pinterest_jquery.js"></script> -->
<link rel="stylesheet" type="text/css" href="css/Pinterest_css3.css">
</head>
<body>
<div id="pic_main">
<div class="pic_box">
<div class="pic">
<img src="Pinterest_img/1.jpg" alt="图片1">
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="Pinterest_img/2.jpg" alt="图片2">
</div>
</div>
</div>
</body>
</html>
其CSS代码
#pic_main{position: relative;}
.pic_box{padding: 15px 0 0 15px;float: left;}
.pic{padding: 10px;border: 1px solid #ccc;border-radius: 5px; box-shadow: 0 0 5px #ccc;}
.pic img{width: 165px;height:auto;}
原生JS
window.onload=function(){
waterfall(‘pic_main‘,‘pic_box‘);
var dataInt = {‘data‘:[{‘src‘:‘1.jpg‘},{‘src‘:‘4.jpg‘},{‘src‘:‘7.jpg‘},{‘src‘:‘17.jpg‘}]};
window.onscroll=function(){
if (checkScrollSlide) {
var oparent = document.getElementById(‘pic_main‘);
for(var i=0;i<dataInt.data.length;i++){
var oBox=document.createElement(‘div‘);
oBox.className=‘pic_box‘;
oparent.appendChild(oBox);
var oPic=document.createElement(‘div‘);
oPic.className=‘pic‘;
oBox.appendChild(oPic);
var oImg=document.createElement(‘img‘);
oImg.src=‘Pinterest_img/‘+dataInt.data[i].src;
oPic.appendChild(oImg);
}
waterfall(‘pic_main‘,‘pic_box‘);
}
}
};
function waterfall(parent,box){
// 获取父元素pic_main
var oparent = document.getElementById(parent);
// 获取picbox数组
var oboxs = getByClass(oparent,box);
// 计算每个box的宽度
var oboxw=oboxs[0].offsetWidth;
// 计算列数
var cols=Math.floor(document.documentElement.clientWidth/oboxw);
// 设置main的宽度
oparent.style.cssText=‘width:‘+cols*oboxw+‘px;margin:50px auto‘;
// 存放第一列的高度
var harray=[];
for (var i=0; i<oboxs.length;i++){
if(i<cols){
harray.push(oboxs[i].offsetHeight);
}else{
var minH = Math.min.apply(null,harray);
var index = getMinIndex(harray,minH);
oboxs[i].style.position=‘absolute‘;
oboxs[i].style.top=minH+‘px‘;
oboxs[i].style.left=index*oboxw+‘px‘;
harray[index]+=oboxs[i].offsetHeight;
}
}
}
function getByClass(parent,className){
var oelements=parent.getElementsByTagName(‘*‘);
var boxArray=new Array();
for (var i=0;i<oelements.length;i++){
if(oelements[i].className==className){
boxArray.push(oelements[i]);
}
}
return boxArray;
}
function getMinIndex(array,min){
for(var i=0;i<array.length;i++){
if(min==array[i])
return i;
}
}
function checkScrollSlide(){
var oparent = document.getElementById(‘pic_main‘);
var oboxs = getByClass(oparent,‘pic_box‘);
var lastBoxH=oboxs[length-1].offsetTop+Math.floor(oboxs[length-1].offsetHeight/2);
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.body.clientHeight||document.documentElement.clientHeight;
return (lastBoxH<scrollTop+height)?true:false;
}
JQuery
$(function(){
waterFull();
var dataInt = {‘data‘:[{‘src‘:‘1.jpg‘},{‘src‘:‘4.jpg‘},{‘src‘:‘7.jpg‘},{‘src‘:‘17.jpg‘}]};
$(window).on(‘scroll‘,function(){
if(checkScrollSlide){
$.each(dataInt.data,function(key,value){
var oBox = $(‘<div>‘).addClass(‘pic_box‘).appendTo($(‘#pic_main‘));
var oPic=$(‘<div>‘).addClass(‘pic‘).appendTo($(oBox));
var oImg=$(‘<img>‘).attr(‘src‘,‘Pinterest_img/‘+$(value).attr(‘src‘)) .appendTo($(oPic));
});
waterFull();
}
});
});
function waterFull(){
var $boxs=$(‘#pic_main>div‘);
var boxW=$boxs.eq(0).outerWidth();
var cols = Math.floor($(window).width()/boxW);
$(‘#pic_main‘).width(cols*boxW).css(‘margin‘,‘0 auto‘);
var hArr=[];
$boxs.each(function(index,value){
var h=$boxs.eq(index).outerHeight();
if (index<cols) {
hArr[index]=h;
}else{
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr);
$(value).css({
‘position‘:‘absolute‘,
‘top‘:minH+‘px‘,
‘left‘:minHIndex*boxW+‘px‘
});
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
});
}
function checkScrollSlide(){
var $lastBox = $(‘pic_#main>div‘).last();
var lasrBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight/2);
var scrollTop = $(window).scrollTop();
var documentH = $(window).height();
return (lasrBoxDis<scrollTop+documentH)?true:false;
}
CSS3
将之前的css文件换成css3文件
css3形成的瀑布流不能实现延迟加载，还是得靠js实现延迟加载
#pic_main{-webkit-column-width: 202px;-moz-column-width: 202px;-o-column-width: 202px;
-ms-column-width: 202px; column-width: 202px;}
.pic_box{padding: 15px 0 0 15px;}
.pic{padding: 10px;border:1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc;
width: 165px;}
.pic img{width:165px;height: auto;display: block;}
时间： 2024-10-21 15:09:55