随着浏览器的窗口调整，进行布局排列（动画）

说明:最近应朋友要求，需要做一个随着浏览器窗口大小调整进行动画排序来适应各种要求。（效果如图）

#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部分还有很多优化的部分，扩展性不强。使用的时候需要手工修改参数