返回首页
当前位置: 主页 > 网络编程 > Jsp实例教程 >

jQuery瀑布流制作教程(宽度自适应/自动加载/无限滚动)

时间:2012-09-06 16:46来源:知行网www.zhixing123.cn 编辑:麦田守望者

制作前准备:

1、masonry.min.js

官方:http://masonry.desandro.com/

下载地址:http://masonry.desandro.com/jquery.masonry.min.js

2、infinitescroll.min.js

官方下载地址:http://www.infinite-scroll.com/

3.jQuery.min.js

官方下载地址:http://jquery.com/

如果想详细了解这三个东东,可以查看官网的演示或者介绍,前提是你英语的好。当然也百度和谷歌也可以帮助你,关于他们的介绍网上还是有不少的。本文不多加介绍,只教会大家怎么用就可以了。

下载好之后引用:位置可以<head></head>标签中也可以在页面底部

<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.masonry.min.js”></script>
<script type=”text/javascript” src=”jquery.infinitescroll.min.js”></script>

我们预想的结构是这样的:
 

<ul id="container">
<li class="box"><img alt="" name="" width="200" height="125" /></li>
<li class="box"><img alt="" name="" width="200" height="52" /></li>
<li class="box"><img alt="" name="" width="200" height="250" /></li>
<li class="box"><img alt="" name="" width="200" height="368" /></li>
<li class="box"><img alt="" name="" width="200" height="269" /></li>
<li class="box"><img alt="" name="" width="200" height="120" /></li>
<li class="box"><img alt="" name="" width="200" height="80" /></li>
<li class="box"><img alt="" name="" width="200" height="333" /></li>
<li class="box"><img alt="" name="" width="200" height="280" /></li>
<li class="box"><img alt="" name="" width="200" height="111" /></li>
<li class="box"><img alt="" name="" width="200" height="220" /></li>
</ul>
<div id="page-nav"><a href="2.html">下一页</a></div>

box的CSS设置
 

.box {
overflow:hidden;
margin:0 20px 20px 0;
width:200px;
}

加入JS代码完成masonry和infinitescroll的设置,实现瀑布流。
 

$(document).ready(function(){
var $container = $('#container');

$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 0
});
});

$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/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 );
});
}
);
});

现在我们可以预览看看实际效果了。。。

DEMO

友情提示:实现动态加载内容必须上传到服务器上测试才可以看到效果,下篇文章会介绍infinitescroll的详细介绍和2.html的制作方法和结构,请大家予以关注。包括用WordPress制作瀑布流哦。。
 

------分隔线----------------------------
标签(Tag):jQuery jquery教程 jquery技巧
------分隔线----------------------------
推荐内容
猜你感兴趣