<?php
/*
@author:luowen
@time:2013-08-12
@desc:jquery实现瀑布流布局,自适应屏幕宽
[HTML Code]
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<link rel="stylesheet" type="text/css" href="wf.css">
<script type="text/javascript" src="../Jquery.js"></script>
<script type="text/javascript" src='wf.js'></script>
</head>
<body >
<div class="container">
<div class="wrap">
<div class="box">
<img src="1.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="2.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="3.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="4.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="5.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="6.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="7.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="8.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="9.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="10.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="5.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="9.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="10.jpg" />
<a href="">gril1</a>
</div>
<div class="box">
<img src="5.jpg" />
<a href="">gril1</a>
</div>
</div>
</div>
</body>
</html>
[CSS Code]
*{
margin: 0;
padding: 0;
}
.container{
margin: 0 auto;
}
.wrap{
margin: 0 auto;
position: relative;
}
.box{
width: 238px;
margin-left: 10px;
padding:5px;
border:1px solid #ccc;
border-radius: 10px;
box-shadow: 1px 1px 10px #000,-1px -1px 3px #ccc;
position: absolute;
left: 0;
top: 0;
}
.box img{
width: 234px;
display: block;
border-radius: 3px;
}
.box a{
height: 30px;
text-align: center;
font:normal 15px '微软雅黑';
line-height: 20px;
display: block;
}
[JS Code]
$(function(){
//动态穿件一个数据存放数据
var arr = [];
//两边留空白宽度
var space = 100;
//盒子的宽度
var boxW = $('.box').eq(0).outerWidth(true);
//文档宽度
var docW;
//文档高度
var docH;
function PBL(){
//盒子的个数
var boxCnt = $('.box').length;
//文档宽度
docW = $(document).width();
//文档高度
docH = $(document).height();
//每排显示多少个
var viewCnt = Math.floor((docW-space*2)/boxW);
for(var i = 0; i < viewCnt; i++){
arr[i] = 0;
}
//wrap 宽度
$('.container').width(boxW*viewCnt);
for(var i = 0; i < boxCnt; i++){
//判断当前盒子在那个列
cols = i%viewCnt;
//讲盒子放在那一列
switch(cols){
case 0:
$('.box').eq(i).css({'left':0,'top':arr[0]});
arr[0] += $('.box').eq(i).outerHeight() + 10;
break;
case 1:
$('.box').eq(i).css({'left':boxW,'top':arr[1]});
arr[1] += $('.box').eq(i).outerHeight() + 10;
break;
case 2:
$('.box').eq(i).css({'left':2*boxW,'top':arr[2]});
arr[2] += $('.box').eq(i).outerHeight() + 10;
break;
case 3:
$('.box').eq(i).css({'left':3*boxW,'top':arr[3]});
arr[3] += $('.box').eq(i).outerHeight() + 10;
break;
case 4:
$('.box').eq(i).css({'left':4*boxW,'top':arr[4]});
arr[4] += $('.box').eq(i).outerHeight() + 10;
break;
case 5:
$('.box').eq(i).css({'left':5*boxW,'top':arr[5]});
arr[5] += $('.box').eq(i).outerHeight() + 10;
break;
case 6:
$('.box').eq(i).css({'left':6*boxW,'top':arr[6]});
arr[6] += $('.box').eq(i).outerHeight() + 10;
break;
case 7:
$('.box').eq(i).css({'left':7*boxW,'top':arr[7]});
arr[7] += $('.box').eq(i).outerHeight() + 10;
break;
case 8:
$('.box').eq(i).css({'left':8*boxW,'top':arr[8]});
arr[8] += $('.box').eq(i).outerHeight() + 10;
break;
case 9:
$('.box').eq(i).css({'left':9*boxW,'top':arr[9]});
arr[9] += $('.box').eq(i).outerHeight() + 10;
break;
case 10:
$('.box').eq(i).css({'left':10*boxW,'top':arr[10]});
arr[10] += $('.box').eq(i).outerHeight() + 10;
break;
case 11:
$('.box').eq(i).css({'left':11*boxW,'top':arr[11]});
arr[11] += $('.box').eq(i).outerHeight() + 10;
break;
case 12:
$('.box').eq(i).css({'left':12*boxW,'top':arr[12]});
arr[12] += $('.box').eq(i).outerHeight() + 10;
break;
case 13:
$('.box').eq(i).css({'left':13*boxW,'top':arr[13]});
arr[13] += $('.box').eq(i).outerHeight() + 10;
break;
case 14:
$('.box').eq(i).css({'left':14*boxW,'top':arr[14]});
arr[14] += $('.box').eq(i).outerHeight() + 10;
break;
}
}
}
PBL();
$(window).resize(function(){
PBL();
});
$(window).scroll(function(){
//滚动的高度
var scrollH = $(window).scrollTop();
//三列中最小的
if(scrollH/docH >= 0.8){
$('.wrap').append("<div class='box'><img src='1.jpg'><a href=''>luowen</a></div>");
// console.log('xx')
}
});
});
注:小BUG 1.屏幕显示最多显示14列,多了出现问题 switch(cols) case 部分
2.滚动条自动append还没做好..
