说明:最近应朋友要求，需要做一个随着浏览器窗口大小调整进行动画排序来适应各种要求。（效果如图）
#lazyload{1100px; margin:0 auto;}
#lazyload li{margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid #cfcfcf;}
.productItems{347px; float:left;}
.productImgWrap{340px; height:274px;padding:7px 0 0 7px; background:#eee url(images/cssPos/template_big_bj.gif) no-repeat left top;;}
.imgListWrap{331px; height:233px;overflow:hidden; position:relative;}
.imgListWrap .mask{position:absolute; left:0; top:0; cursor:pointer;}
.imgListWrap .mask .opacity{display:none;331px; height:233px; background:#000; z-index:1; position:absolute; left:0; top:0;}
.imgListWrap .mask p{ position:relative; text-shadow:0 0 20px #FF0; display:none;color:#fff;z-index:2; font-weight:bold;331px;height:233px;text-align:center; line-height:233px; }
.imgListWrap .mask span{padding-left:10px;color:#99cbfe;}
.changingOver{margin-top:10px;height:30px; line-height:30px;}
.changingOver p{float:left;}
.changingOver span{float:right;display:block;75px;height:30px;}
.changingOver span i{display:block;_display:inline;10px;margin-top:5px;cursor:pointer; text-indent:-9999px; height:14px; line-height:14px;float:left; background:url(images/cssPos/changeBtn.png) no-repeat left top;}
*html .changingOver span i{ background-image:url(images/cssPos/changeBtn.gif);}
.changingOver span i.prev{ background-position:0px -14px;margin-left:20px;}
.changingOver span i.prev:hover{ background-position:-10px -14px;}
.changingOver span i.next{background-position:0px 0px; margin-left:20px;}
.changingOver span i.next:hover{background-position:-10px 0px;}
.companyName{margin-top:5px;padding:0 5px;}
.companyName p{float:left;color:#999999;}
.companyName .like{float:right; position:relative;top:2px;}
.companyName .like em,.companyName .like a{display:block;float:right;}
.companyName .like a{position:relative;zoom:1; outline:none;17px;height:17px;background:url(images/cssPos/like.png) no-repeat -104px top;}
.companyName .like a span{display:none;80px;height:27px; background:url(images/cssPos/like.png) no-repeat left top;position:absolute;top:-35px;left:-31px;}
*html .companyName .like a span{ background-image:url(images/cssPos/like.gif);}
*html .companyName .like a{ background-image:url(images/cssPos/like.gif);}
.companyName .like a:hover{background-position:-88px top;}
.companyName .like em{margin-right:5px;position:relative;top:-2px;}
.bottom{345px;border:1px solid #cfcfcf;border-1px 0;height:25px; line-height:25px; margin-top:10px;}
.bottom p{float:left;padding-left:3px;font-weight:bold;color:#709fcf;172px;border-right:1px solid #e7e7e7;}
.buttonCurrent{float:right;margin-right:5px;padding-top:5px;}
.buttonCurrent a{background:url(images/cssPos/changeBtn.gif) no-repeat -3px -31px;display:block;15px;height:15px;float:left;margin-left:2px;line-height:8px;}
.buttonCurrent a:hover{ background-position:-3px -45px;}
.buttonCurrent a.current{ background-position:-3px -45px;}
.scrollBox{993px;}
.scrollBox a{display:block;331px; height:233px;float:left;}
.between{ margin:0 29px;}
#loadMore{1100px;text-align:center;line-height:50px;font-size:14px; margin:0 auto;}
/**************************/
#productListWrap{padding-bottom:50px;}
#lazyload{ position:relative;height:2185px;}
#lazyload li.autoPos{ position:absolute;left:376px;top:0;347px; height:340px; margin:0;padding:0;border:none;}
<ul id="lazyload">
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
<li class="autoPos">
<div class="productItems">
<div class="productImgWrap">
<div class="imgListWrap">
<div class="mask">
<div class="opacity"></div>
<p>2012.01.13 Sun<span>Brochure</span></p>
</div>
<div class="scrollBox clearfix">
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
<a href="#"><img src="images/img/p.jpg" alt="33" width="331" height="233" /></a>
</div>
</div>
<div class="changingOver clearfix">
<p>加多宝集团</p>
<span class="clearfix"><i class="prev" title="上一张"><</i><i class="next" title="下一张">></i></span>
</div>
</div>
<div class="companyName clearfix">
<p>加多宝集团年会宣传册</p>
<div class="like">
<a href="#like"><span></span></a>
<em>32</em>
</div>
</div>
<div class="bottom clearfix">
<p>Designed Vic Team</p>
<span class="buttonCurrent">
<a href="#item" class="current"> </a>
<a href="#item"> </a>
<a href="#item"> </a>
</span>
</div>
</div>
</li>
</ul>
/**
@开发者:杨永;
@e-mail:yang_liulang@126.com;
@QQ:377746756;
@功能说明:随着浏览器大小改变，就行调整模块等，类似瀑布流的效果;
@日期：2012-02-20;
*/
function AutoPos(autoPosContainer){
this.autoPosContainer=autoPosContainer;//保存自动调整位置的容器
this.autos=$(".autoPos",this.autoPosContainer);//保存所以自动排序的对象
this.size=this.autos.length;//初始化数量
var _this_=this;
var windowWidth=$(window).width();
$(function(){
_this_.defaultVeiw(windowWidth);
});
this.defaultVeiw(windowWidth);
$(window).resize(function(){
windowWidth=$(window).width();
_this_.defaultVeiw(windowWidth);
});
};
/*这里的参数可以自由设置，后期维护使用*/
AutoPos.dataValue={
offset:29,
boxWidth:347,
boxHeight:340,
maxWidth:1100,
minWidth:347,
centerWidth:723
};
AutoPos.prototype={
defaultVeiw:function(windowWidth){
if(windowWidth>=AutoPos.dataValue.maxWidth){
this.autoPosContainer.parent().css("paddingLeft",0);
this.autoPosContainer.attr("data-cols",3);
this.init(3);
}else if(windowWidth<AutoPos.dataValue.maxWidth&&windowWidth>=AutoPos.dataValue.centerWidth){
this.autoPosContainer.parent().css("paddingLeft","50px");
this.autoPosContainer.attr("data-cols",2);
this.init(2);
}else{
this.autoPosContainer.parent().css("paddingLeft","50px");
this.autoPosContainer.attr("data-cols",1);
this.init(1);
};
},
init:function(cellValue){
var rowSize=this.calculateRowSize(cellValue);//返回计算出来的行数
var rowsArr=this.sortNewArr(rowSize,cellValue);//注意变动的值
var or;
for(var i=0;i<rowsArr.length;i++){
for(var j=0;j<rowsArr[i].length;j++){
or=rowsArr[i][j].is(".after")?"css":"animate";
rowsArr[i][j][or]({
top:i*AutoPos.dataValue.boxHeight+this.returnGapValue(i)+"px",
left:j*AutoPos.dataValue.boxWidth+this.returnGapValue(j)+"px"
},"slow");
};
};
},
calculateRowSize:function(cellValue){//计算行数并且设置容器的高度
var rowSize=Math.ceil(this.size/cellValue);//计算出行的数量
this.autoPosContainer.attr("data-rows",rowSize);
this.autoPosContainer.height((AutoPos.dataValue.boxHeight*rowSize)+(AutoPos.dataValue.offset*(rowSize-1)));
//将行数返回
return rowSize;
},
sortNewArr:function(rows,cols){
var oldArr=[],newArr=[];
this.autos.each(function(){
oldArr.push($(this));
});
for(var i=0;i<rows;i++){
newArr.push(oldArr.slice(i*cols,cols*(i+1)));
};
return newArr;
},
returnGapValue:function(i){
return i==0?0:i*AutoPos.dataValue.offset;
}
};
//创建自由动画排列
var auto=new AutoPos($("#lazyload"));
注：js部分还有很多优化的部分，扩展性不强。使用的时候需要手工修改参数