jQuery Masonry下载地址:
http://masonry.desandro.com/
1、基本布局
<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>
2、排列图片
使用imagesLoaded函数在图像加载完成后才开始排列图片。
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item'
});
});
});
</script>
3、滚动动画
(1)使用JS实现动画
<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;
}
4、固定宽度
#container {
width: 1000px;
}
5、无限滚动加载
$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 );
});
}
);
通过nav标签中的a来制定加载内容
<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>
设置Loading图像的布局
#infscr-loading {
margin-left: -100px;
width: 200px;
position: fixed;
left: 50%;
bottom: 10px;
text-align: center;
}
- 大小: 15.1 KB
- 大小: 9.7 KB
- 大小: 10.1 KB
- 大小: 2.6 MB
- 大小: 5.1 MB
- 大小: 65.6 KB
分享到:
相关推荐
jQuery瀑布流插件masonry实现的瀑布流布局网页,很不错的瀑布流插件,采用lightbox插件放大展示图片,非常的漂亮的布局。
基于 jQuery Masonry的网页瀑布流,自己参考官方文档写的。里面含代码以及图片、css样式等。
这是一款使用jQuery Masonry和css3制作的全屏响应式瀑布流网格布局插件。该插件布局采用流行的瀑布流布局,当点击查看更多链接,会切换到该项目的全屏幻灯片模式,在幻灯片模式下可以浏览所有的图片和信息。
jquery masonry瀑布流插件制作图片瀑布流布局代码
基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能(使用的是aspx的页面)
jquery.masonry.js瀑布流图片墙点击相册图片展示大图信息
jQuery无限加载瀑布流插件masonry是一款基于masonry插件实现的jQuery无限加载瀑布流代码。
Jquery网站瀑布流插件masonry是一款jquery.masonry插件。
bootstrap+masonry实现瀑布流 交流学习使用 原作者地址忘记了 参考学习
jquery.masonry 瀑布流插件 有详细的dome文档。用法简单,很好的jquery插件
这是一款简单实用的类似Masonry瀑布流的jQuery图片网格布局插件。该Masonry瀑布流布局简单易用,它通过imagesloaded来加载图片,并且可以非常方便的动态添加任意数量的图片到网格布局中。
jQuery masonry与infinitescroll两款瀑布流插件制作的最流行的瀑布流布局演示效果,可以无限浏览图片或内容无限加载的瀑布流效果。
在www.vjiedao.cn上验证过,纯静态HTML+Jquery实现网页瀑布流,基于 jquery.masonry.min.js,欢迎交流下载
Masonry是一款jQuery网格布局(瀑布流)插件,可以实现类似Pinterest模式的砌体布局效果。通过把元素自动填充在垂直的空白区域,就像墙上堆砌的石头一样。这个库还可以作为jQuery插件使用,帮助你轻松实现这种效果。...
masonry瀑布流布局滑动到底部加载更多demo
这是一款基于Masonry的网格瀑布流加载动画特效。该特效的示例分为3组,分别使用不同的Masonry布局,并且每组布局都有15种网格加载动画效果。
jquery.masonry实现的瀑布流源代码