jQuery Masonry下载地址:[url=http://masonry.desandro.com/]http://masonry.desandro.com/[/url]
[b]1、基本布局[/b]
[img]http://dl.iteye.com/upload/attachment/0071/0776/bc200a5a-b862-3877-b2ce-e648ed8dfdbb.gif[/img]
[img]http://dl.iteye.com/upload/attachment/0071/0779/c9d19ad1-be43-3488-8e79-9c4d62c5670a.gif[/img]
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>
<script>
$(function(){
$('#container').masonry({
itemSelector : '.item'
});
});
</script>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
~ 省略 ~
</div>
[b]2、排列图片
使用imagesLoaded函数在图像加载完成后才开始排列图片。[/b]
[img]http://dl.iteye.com/upload/attachment/0071/0791/bc49de5e-712c-3f74-b264-f875459c33ad.gif[/img]
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item'
});
});
});
</script>
[b]3、滚动动画[/b]
[img]http://dl.iteye.com/upload/attachment/0071/0786/6a21a269-4300-30a1-b958-130728703745.gif[/img]
[b](1)使用JS实现动画[/b]
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item',
isAnimated : true
});
});
});
</script>
(2)通过CSS3实现动画
#container,
.item {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
#container {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.item {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-ms-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}
[b]4、固定宽度[/b]
[img]http://dl.iteye.com/upload/attachment/0071/0784/5b4a609f-df08-32ab-92b0-c55d186d89d3.gif[/img]
#container {
width: 1000px;
}
[b]5、无限滚动加载[/b]
[img]http://dl.iteye.com/upload/attachment/0071/0788/b0191174-4092-307a-b8ba-c3d89708207b.gif[/img]
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.item', // selector for all items you'll retrieve
loading: {
finishedMsg: 'The END!',
img: '6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
[b]通过nav标签中的a来制定加载内容[/b]
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
~ 省略 ~
</div>
<nav id="page-nav">
<a href="masonry06-2.html"></a>
</nav>
[b]设置Loading图像的布局[/b]
#infscr-loading {
margin-left: -100px;
width: 200px;
position: fixed;
left: 50%;
bottom: 10px;
text-align: center;
}