JavaScript实现
html代码部分
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流布局</title>
<link rel="stylesheet" href="css/style.css">
<script src="./js/script.js"></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="./picture/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/01.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/04.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/03.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/01.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/04.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/01.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/01.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/01.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/01.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/01.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/01.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/04.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/01.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/04.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="./picture/7.jpg" alt="">
</div>
</div>
</div>
</body>
</html>CSS代码
*{
margin:0;
padding:0;
}
#main{
position: relative;
}
.box{
padding: 15px 0 0 15px ;
float:left;
}
.pic{
padding: 10px;
border:1px solid #ccc;
border-radius: 5px;
/*水平和垂直影音都为0*/
box-shadow:0 0 5px ;
}
.pic img{
width: 165px;
height: auto;
}
JS代码部分
window.onload = function(){
//将图片摆放在该摆放的位置上
waterfall('main','box');
var dataInt = {'data':[{"src":'7.jpg'},{"src":"2.jpg"},{"src":"4.jpg"}]};
window.onscroll = function(){
//封装一个函数判断是否具备加载条件
if(checkScrollSlide()){
var oParent = document.getElementById('main');
//将数据块渲染到页面的尾部
for(var i = 0;i<dataInt.data.length;i++){
var oBox = document.createElement('div');
oBox.className = "box";
//创建oBox元素，将其添加到父元素的最后面
oParent.appendChild(oBox);
//创建图片盒子
var oPic = document.createElement('div');
oPic.className = "pic";
oBox.appendChild(oPic);
var oImg = document.createElement('img');
oImg.src = "./picture/"+dataInt.data[i].src;
oPic.appendChild(oImg);
}
waterfall('main','box');
}
}
}
function waterfall(parent,box){
//将main下所有class为box的元素取出来
var oParent = document.getElementById(parent);
var oBoxs = getByClass(oParent,box);
// console.log(oBoxs.length);
//计算整个页面显示的列数(页面/box的宽)
var oBoxW = oBoxs[0].offsetWidth;
var cols = parseInt(document.documentElement.clientWidth/oBoxW);
//设置main的总宽度
oParent.style.cssText = 'width:'+ oBoxW*cols+'px;margin:0 auto';
//定义一个数组，用于存储第一行所有元素的高度
//存放每列高度的数组
var hArr = [];
for(var i = 0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH = Math.min.apply(null,hArr);
//获取到最小值在数组中的索引
var index = getMinhIndex(hArr,minH);
oBoxs[i].style.position = 'absolute';
oBoxs[i].style.top = minH + 'px';
// oBoxs[i].style.left = oBoxW*index+'px';
oBoxs[i].style.left = oBoxs[index].offsetLeft+'px';
hArr[index] += oBoxs[i].offsetHeight;
}
}
// console.log(hArr);
}
//根据class获取元素4
function getByClass(parent,clsName){
//用来存储获取到的所有class为box的元素
var boxArr = new Array();
oElements = parent.getElementsByTagName("*");
for(var i = 0;i<oElements.length;i++){
if(oElements[i].className == clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
//找出数组中某个元素在数组中索引的位置
function getMinhIndex(arr,val){
//遍历数组元素
for(var i in arr){
if(arr[i] == val){
return i;
}
}
}
//检测是否具备了滚动加载数据块的条件
function checkScrollSlide(){
var oParent = document.getElementById('main');
var oBoxs = getByClass(oParent,'box');
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
// console.log(oBoxs[oBoxs.length-1].offsetTop);
// console.log(lastBoxH);
//解决标准模式与混杂模式下获取滚动条滚动高度的兼容问题
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log(scrollTop);
var height = document.body.clientHeight || document.documentElement.clientHeight;
//当用户拉动的距离大于页面最后一列
var count = height+scrollTop;
// console.log(count);
return (lastBoxH < count)?true : false;
}
jquery实现">jQuery实现：
HTML部分代码和css代码与上面相同
$(window).on('load',function(){
// alert(1);
waterfall();
var dataInt = {"data":[{"src":"1.jpg"},{"src":"3.jpg"},{"src":"01.jpg"},{"src":"05.jpg"}]}
$(window).on('scroll',function () {
if(checkScrollSlide()){
$.each(dataInt.data,function (key,value) {
//创建元素
//jQuery 可以连缀，可以隐式迭代
var oBox = $('<div>').addClass('bigbox').appendTo($('#main'));
// console.log(oBox);
var oPic = $('<div>').addClass('littlebox').appendTo(oBox);
var oImg = $('<img>').attr('src','./images/'+$(value).attr('src')).appendTo(oPic);
// console.log($(value).attr('src'));
// $(oPic).append(oImg);
})
waterfall();
}
})
})
function waterfall() {
//找到main下的一级div元素
var $boxs = $('#main>div');
//outWidth包含padding 和border
var w = $boxs.eq(0).outerWidth();
// var w = $boxs.eq(0).width();
var cols = Math.floor($(window).width()/w);
// alert(cols);
//用width设置宽度的时候不需要设置单位
$('#main').width(cols*w).css("margin","0 auto");
var hArr = [];
//第一个参数：元素索引 第二个参数：元素值
$boxs.each(function (index,value) {
//利用每个元素的索引值存储元素的高度
var h = $boxs.eq(index).outerHeight();
if(index<cols){
hArr.push(h);
// console.log(hArr);
}else{
var minH = Math.min.apply(null,hArr);
//利用jQuery提供的数据来判断值为minH的元素在hArr中的索引
var minHIndex = $.inArray(minH,hArr);
// console.log(minHIndex);
//value是DOM对象，无法使用jQuery对象的方法，我们需要将其转换为jQuery对象
//我们使用$()将其转化为jQuery对象
$(value).css({
'position':'absolute',
'top': minH + 'px',
'left':minHIndex*w + 'px'
})
//改变数组的值
hArr[minHIndex] += $boxs.eq(index).outerHeight();
}
})
}
//检测是否具备加载条件
function checkScrollSlide() {
//获取数组元素数组中的最后一个元素
var $lastBox = $('#main>div').last();
var lastBoxDis = $lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
var scrollTop = $(window).scrollTop();
var documentH = $(window).height();
return(lastBoxDis< scrollTop+documentH)?true :false;
}
CSS3实现
#main{
/*设置列宽*/
/*-webkit-column-width:202px ;*/
/*-moz-column-width: 202px;*/
/*-o-columns-width:202px ;*/
/*-ms-column-width:202px;*/
-webkit-column-gap:30px;
-moz-column-gap:5px;
-o-columns-gap:5px;
-ms-columngap:5px;
/*-webkit-column-rule:2px dashed red ;*/
/*-moz-column-rule:2px solid red ;*/
/*-o-columns-rule:2px solid red ;*/
/*-ms-columnrule:2px solid red ;*/
-webkit-column-count:7;
/*-moz-column-count:5;*/
/*-o-columns-count:5 ;*/
/*-ms-column-count:5;*/
}
.box{
padding: 10px 0 0 15px;
}
.pic{
padding: 10px;
border:1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px;
width: 165px;
}
.pic img{
display: block;
width: 165px;
height: auto;
}
