标签：array outer images jpg span scrollto fse div sha
//html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <link rel="stylesheet" type="text/css" href="STYLE.css"> </head>
<style>
*{
margin: 0;
padding:0;
}
#main{
position: relative;
}
.box{
float: left;
}
.pic{
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
.pic img {
width: 165px;
height: auto;
}
</style>
<body> <div id="main"> <div class="box"> <div class="pic"><img src="./images/P_00.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_01.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_02.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_03.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_04.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_05.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_06.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_07.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_08.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_09.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_010.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_011.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_012.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_013.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_014.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_015.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_016.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_017.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_018.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_019.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/toTop.gif" ></div> </div> </div> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="script.js" type="text/javascript"></script> </body> </html>
//JQuery文件 $(window).on(‘load‘,function(){ waterfull(); //实现加载 var dateInt={"data":[{"src":‘P_00.jpg‘},{"src":‘P_01.jpg‘},{"src":‘P_02.jpg‘},{"src":‘P_03.jpg‘}]}; $(window).on(‘scroll‘,function(){ if(checkScrollSlide){ $.each(dateInt.data,function(key,value){ var oBox = $(‘<div>‘).addClass(‘box‘).appendTo($(‘#main‘)); var oPic = $(‘<div>‘).addClass(‘pic‘).appendTo($(oBox)); var oImg = $(‘<img>‘).attr(‘src‘,‘./images/‘+$(value).attr(‘src‘)).appendTo($(oPic)); }) } waterfull(); }) }); function waterfull(){ var $boxs = $(‘#main>div‘); var w = $boxs.eq(0).outerWidth(); var cols = Math.floor($(window).width()/w); $(‘main‘).width(w*cols).css(‘margin‘,‘0 auto‘); var hArr = []; $boxs.each(function(index,value){ var h = $boxs.eq(index).outerHeight() if(index<cols){ hArr[index]=h; }else { var minH = Math.min.apply(null,hArr); var minHindex = $.inArray(minH,hArr); $(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.ouertHeight()/2); var scrollTop = $(window).scrollTop(); var documentH = $(window).height(); return (lastBoxDis<scrollTop+documentH)?true:false; }
标签：array outer images jpg span scrollto fse div sha
原文地址：http://www.cnblogs.com/WayToJs/p/6130501.html
