masonry插件和infinitescroll插件实现无刷新无分页完美瀑布流

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

地址有：http://www.17sucai.com/pins/2657.html

如果你善于发现美，如果你善于观察新鲜的事物，如果你是一名有爱的前端攻城师或设计尸，那么你一定不会对下面图片中的结构感到陌生。没错，这就是现在很火的瀑布流。也称砌墙效果。就是这种不稳定结构，就是这种交错之美，震撼着每个浏览者的视神经。对于习惯了传统条条框框布局的读者来说，这种方式无疑会让他们的鼠标自由摇摆…

实现这个效果需要两个jQuery插件infinite-scroll和Masonry。

参数详解：

$('#content').infinitescroll({
navSelector : "div.navigation", //导航的选择器，会被隐藏
nextSelector : "div.navigation a:first",//包含下一页链接的选择器
itemSelector : "#content div.post",//你将要取回的选项(内容块)
debug : true, //启用调试信息
loadingImg : "/img/loading.gif", //加载的时候显示的图片
//默认采用："http://www.infinite-scroll.com/loading.gif"
animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载，默认150
bufferPx : 40,//载入信息的显示时间，时间越大，载入信息显示时间越短
errorCallback: function(){},//当出错的时候，比如404页面的时候执行的函数
localMode : true //是否允许载入具有相同函数的页面，默认为false
},function(arrayOfNewElems){
//程序执行完的回调函数
});

取消绑定事件的函数写法：$(window).unbind(‘.infscr’); 通过事件触发加载数据的写法： $(document).trigger(‘retrieve.infscr’); //比如加到某个click事件中

此插件还有一个鲜为人知的功能就是可以载入任何页面的选择器中的内容，可以是id以及是class，并转化到html存储。要比jquery自带的的load强大多了。

$('').load('/page/2/ #content div.post',function(){
$(this).appendTo('#content');
});

参数详解：

$(function(){
$(?#container?).masonry({
// options 设置选项
itemSelector : ?.item?, //子类元素选择器
columnWidth : 240 ,//一列的宽度，包括边距 220+10+10
isAnimated:true, //使用jquery的布局变化，是否启用动画效果
animationOptions:{
//jquery animate属性，动画效果选项。比如渐变效果 Object { queue: false, duration: 500 }
},
gutterWidth:0,//列的间隙
isFitWidth:true,//自适应宽度
isResizableL:true,// 是否可调整大小
isRTL:false,//使用从右到左的布局
});
});

合并效果

XML/HTML code

<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>

CSS代码：

CSS code?

#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

JavaScript 代码：

JavaScript code

<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,

isResizableL:true,

columnWidth: 214

});

$container.infinitescroll({

navSelector : '#pnavigation', // selector for the paged navigation

nextSelector : '#pnavigation a', // selector for the NEXT link (to page 2)

itemSelector : '.waterfall', // 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 );

});

}

);

});

</script>

详细的例子和下载两个JS的网址：http://yunpan.cn/QIWZShkkQqmem

在这个文件夹里面有两个案例，第一个案例里面要链接到数据库才能看到大致的效果，其中：

之后在网页头自己写一个js脚本

<script>
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--本页的导航，意思就是一个可以触发ajax函数的模块
nextSelector: "#navigation a", //下一页的导航
itemSelector: ".scroll " , //此处我用了类选择器，选择的是你要加载的那一个块（每次载入的数据放的地方）
animate: true, //加载时候时候需要动画，默认是false
maxPage: 3, //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿
});
});
</script>

3.或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无限翻页效果</title>
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
<script src="css/infinite-scroll/test/debug.js"></script>
<script>
$(document).ready(function (){ //别忘了加这句，除非你没学Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--成功后自动隐藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
});
});
</script>
</head>
<body>
<div id="container">
<div class="scroll">
第一页内容第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容
</div>
</div>
<div id="navigation" align="center">
<a href="user/list?page=1"></a>
</div>
</body>
</html>