日期:2014-05-16 浏览次数:20365 次
<!--容器代码-->
<div id="container">
<div class="waterfall">
<a href=""><img alt="" src="images/P (1).jpg"></a>
<p>精致体验:LOFTER追求精致入微的视觉和交互体验,为每一片内容精心度量,让你的视角所触及的每一个像素,都蕴含独具匠心的精致设计。</p>
</div>
<div class="waterfall">
<a href=""><img alt="" src="images/P (1).jpg"></a>
<p>精致体验:LOFTER追求精致入微的视觉和交互体验,为每一片内容精心度量,让你的视角所触及的每一个像素,都蕴含独具匠心的精致设计。</p>
</div>
<!-- 还有好多。。。省略了。。。 -->
</div>
<!--分页代码-->
<div class="navigation" id="pnavigation">
<a href="page/2.html">下一页</a>
</div>
#container { position: relative; margin:0px auto; padding:15px 10px; }
.waterfall {
position: absolute;
top:1000px;
left:-1000px;
border: 1px solid #DFDFDF;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 10px;
background-color: #FFF;
width:192px;
margin-top:15px;
-webkit-transition: left .3s ease-in-out,top .3s ease-in-out;
-moz-transition: left .5s ease-in-out,top .5s ease-in-out;
-o-transition: left .3s ease-in-out,top .3s ease-in-out;
transition: left .3s ease-in-out,top .3s ease-in-out;
}
.navigation { display:none; padding:10px 0px; text-align:center; }
.navigation a { display:inline-block; padding:2px 5px; border:1px solid #999; background:#FFF; margin:0px 10px; text-shadow:0px 1px 2px rgba(0,0,0,0.5); }
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.waterfall',
gutterWidth:15,
isFitWidth:true,
isResi