一、用纯CSS3实现瀑布流
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17.3瀑布流</title>
<style>
#main .box img{
width:100%;
}
#main .box{
width:140px;
border:2px solid #CCC;
border-radius:5px;
padding:5px;
}
#main{
-webkit-column-width:154px;
-moz-column-width:154px;
}
</style>
</head>
<body>
<div id="main">
<div class="box"><img src="waterFall/1.jpg"></div>
<div class="box"><img src="waterFall/2.jpg"></div>
<div class="box"><img src="waterFall/3.jpg"></div>
<div class="box"><img src="waterFall/4.jpg"></div>
<div class="box"><img src="waterFall/5.jpg"></div>
<div class="box"><img src="waterFall/6.jpg"></div>
<div class="box"><img src="waterFall/7.jpg"></div>
<div class="box"><img src="waterFall/8.jpg"></div>
<div class="box"><img src="waterFall/9.jpg"></div>
<div class="box"><img src="waterFall/10.jpg"></div>
<div class="box"><img src="waterFall/11.jpg"></div>
<div class="box"><img src="waterFall/12.jpg"></div>
<div class="box"><img src="waterFall/13.jpg"></div>
<div class="box"><img src="waterFall/14.jpg"></div>
<div class="box"><img src="waterFall/15.jpg"></div>
<div class="box"><img src="waterFall/16.jpg"></div>
<div class="box"><img src="waterFall/17.jpg"></div>
<div class="box"><img src="waterFall/18.jpg"></div>
<div class="box"><img src="waterFall/19.jpg"></div>
<div class="box"><img src="waterFall/20.jpg"></div>
</div>
</body>
</html>
效果图
二、用jS实现瀑布流
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流</title>
<style>
*{ margin:0; padding:0;}
li{ list-style-type:none;}
img{ border:0;}
#waterFall{ position:relative; margin:0 auto; }
/*.box主要用于定位*/
.box{ float:left; padding:2px;}
.box div{ border:1px solid #CCC; padding:3px; border-radius:5px;}
.box div img{ width:200px; height:auto;}
</style>
<script>
window.onload = function(){waterFall();};
//实现瀑布流函数
function waterFall()
{
//测试waterFall()函数
//alert("测试waterFall()函数!");
//获取文档中对象
//获取waterFall元素
var oWaterFall = document.getElementById('waterFall');
//获取box对象集合
var boxArr = document.getElementsByClassName('box');
//测试boxArr元素的个数
//alert(boxArr.length);
//计算一个盒子的宽度
var boxWidth =boxArr[0].offsetWidth;
//clientWidth= style.width + padding的宽度和
//offsetWidth= clientWidth + border的宽度和
//console.log(boxWidth);
//获取浏览器可视窗口的宽度
var w = document.documentElement.clientWidth;
//console.log(w);
//计算图片的列数
//Math.floor()是向下取整函数
var cols = Math.floor(w/boxWidth);
//console.log(cols);
//计算oWaterFall宽度= cols*boxWidth
oWaterFall.style.width = cols*boxWidth + 'px';
//console.log(oWaterFall.style.width);
//定义存储列高的数组
//方法1:var hArr = [];
//方法2:
var hArr = new Array();
//hArr数组是cols列
//为hArr赋值并对boxArr对象进行绝对定位
for(var i=0;i<boxArr.length;i++)
{
if(i<cols)
{
//为hArr数组赋初值
//方法1
//hArr[i]=boxArr[i].offsetHeight;
//方法2
hArr.push(boxArr[i].offsetHeight);
//console.log(hArr[i]);
}
else
{
//(1)返回存放列高hArr数组最小值
//方法1：用JS自带方法
//var minHeight = Math.min.apply(null,hArr);
//方法2:自定义方法
var minHeight=minValue(hArr);
//console.log(minHeight);
//(2)返回hArr数组最小值得索引位置
var index = minIndex(hArr,minHeight);
//console.log(index);
//(3)为boxArr[i]定位
//绝对定位
boxArr[i].style.position='absolute';
//top
boxArr[i].style.top = minHeight + 'px';
//left
//left = index*boxWidth=索引值*列宽
boxArr[i].style.left= boxArr[index].offsetLeft + 'px';
console.log("数组"+hArr+"最小值"+minHeight+"索引"+index)
//(4)更新hArr的列高
hArr[index]+= boxArr[i].offsetHeight;
}
}//end for
}//end waterFall
//返回数组中最小值函数
function minValue(arr)
{
var minVal=arr[0];
//比较过程
for( var i=1;i<arr.length;i++)
{
if(minVal>arr[i])
{
minVal=arr[i];
}
}
return minVal;
}
//返回数组中指定元素的索引位置
//在arr数组中查找value元素得位置，并返还位置
function minIndex(arr,value)
{
for(var i in arr)
//for(var i=0;i<arr.length;i++)
{
if(arr[i]==value)
return i;
}
}//end minIndex
</script>
</head>
<body>
<div id="waterFall">
<div class="box">
<div><img src="landscapePic/0.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/1.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/2.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/3.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/4.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/5.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/6.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/7.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/8.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/9.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/10.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/11.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/12.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/13.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/14.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/15.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/16.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/17.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/18.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/19.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/20.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/21.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/22.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/23.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/24.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/25.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/26.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/27.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/28.jpg"/></div>
</div>
<div class="box">
<div><img src="landscapePic/29.jpg"/></div>
</div>
</div>
</body>
</html>
效果图
三、用jQuery实现瀑布流
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>8.3jQuery案例四瀑布流</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//定义瀑布流函数
function waterFall(){
//一、计算main的宽度
//分析:main_width = img_width*col_num
//1.计算图片的宽度
var $img0 = $('#main img').eq(0);//获取图片对象
var img_width = $img0.outerWidth(true);
console.log("img的宽度包括margin+border+padding"+img_width);
console.log("img的宽度包括border+padding"+$img0.outerWidth());
console.log("img的宽度包括padding"+$img0.innerWidth());
console.log("img的实际宽度"+$img0.width());
//2.获取浏览器的宽度
var window_width = $(window).width();
console.log("浏览器的宽度为"+window_width);
//3.计算图片列数
var col_num = Math.floor(window_width/img_width);
console.log("图片的列数为"+col_num);
//4.计算main的宽度
var main_width = img_width*col_num;
console.log("main的宽度为"+main_width);
//设置main的宽度
//$('#main').width(main_width);
$('#main').css('width',main_width);
//二、定位图片
//1.定义数组
var hArray = new Array();//定义存放列高的数组
//2.初始化数组
for(i=0;i<col_num;i++){hArray[i]=0;}
//3.定位每一张图片
$('#main img').each(function(index, element)
{
var index = $(this).index();//图片索引
var minIndex;//数组最小值索引
var t;//图片上偏移量
var l;//图片左偏移量
if(index<col_num){minIndex = index;}
else
{
var minHeight = Math.min.apply(null,hArray);//获取数组中最小值
console.log("数组最小值："+minHeight);
var minIndex = $.inArray(minHeight,hArray);//获取最小值索引
console.log("最小值索引："+minIndex);
//$.inArray(值,数组);返回值在数组中的位置
}
l = minIndex*img_width;//图片的左偏移量
t = hArray[minIndex];//图片的上偏移量
$(this).css({'position':'absolute','left':l,'top':t});//定位图片
var img_h = Math.floor($(this).height());//将高度取整
console.log("第"+index+"张图片的高度:"+img_h);
$(this).height(img_h);//重置图片高度
var h = $(this).outerHeight(true);
hArray[minIndex]+=h;//更新高度数组值
});//end each()
}//end waterFall()
//调用waterFall()
waterFall();
//浏览器大小改变后调用waterFall()
$(window).resize(function(){
waterFall();
});
});
</script>
<style>
*{
padding:0;
margin:0;
}
#main{
position:relative;
margin:0 auto;
/*-webkit-column-width:215px;*//*360*/
/*-moz-column-width:215px;*//*火狐*/
}
#main img{
width:200px;
border:solid 1px red;
padding:5px;
margin:0 4px 4px 0;/*top right bottom left*/
}
</style>
</head>
<body>
<div id="main">
<img src="img3/0.jpg">
<img src="img3/1.jpg">
<img src="img3/2.jpg">
<img src="img3/3.jpg">
<img src="img3/4.jpg">
<img src="img3/5.jpg">
<img src="img3/6.jpg">
<img src="img3/7.jpg">
<img src="img3/8.jpg">
<img src="img3/9.jpg">
<img src="img3/10.jpg">
<img src="img3/11.jpg">
<img src="img3/12.jpg">
<img src="img3/13.jpg">
<img src="img3/14.jpg">
<img src="img3/15.jpg">
<img src="img3/16.jpg">
<img src="img3/17.jpg">
<img src="img3/18.jpg">
<img src="img3/19.jpg">
<img src="img3/20.jpg">
</div>
</body>
</html>
效果图
改变浏览器窗口
