首页 > 淘插件 > 综合功能 > (瀑布流样式效果)Masonry-jquery插件下载
(瀑布流样式效果)Masonry-jquery插件下载
授权形式: 免费版
更新时间: 2015-01-16 12:32:53
软件语言: 英文
软件平台: Win2000/WinXP/Win2003,Linux,win7
软件类别: 程序源码
文件大小: 未知
评论等级: ★★★★☆
浏览次数: (今日:,本周:,本月:
跳转地址: [跳到下载地址] 暂无预览
软件简介

(瀑布流样式效果)Masonry-jquery插件下载

瀑布流效果jquery插件-Masonry

jquery瀑布流效果插件-Masonry

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

这个效果的应用已经在很多地方出现了,比较常见的轻博中的模板,貌似轻博中都有此类型的模板。
 

jquery Masonry布局效果演示代码(结合imagesLoad插件):


$(function(){
   var $container = $('#masonry');
   $container.imagesLoaded( function(){  //图片加载完成后在使用瀑布流(防止图片为加载完毕导致的宽高计算错误)
     $container.masonry({
       itemSelector : '.box',
       isAnimated: true //最后一项不要加逗号,否则ie里可能不正常
     });
   });
});

Masonry安装使用:

  • 步骤一:同大多数jquery插件一样,载入jquery库文件,然后载入masonry插件。
  • 步骤二:代码结构采用下面格式。
    	<div id="container">
    	<div class="item">...</div><div class="item">...</div><div class="item">...</div>
    	</div>
  • 步骤三:CSS文件部分。
    .item { width:220px;margin:10px;float: left; } 
    子类要添加浮动样式
  • 步骤四:Mascory的参数设置

    <script type="text/javascript">
    $(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,//使用从右到左的布局
    });
    });
    </script>


    以上设置信息在官网上都有案例演示,有兴趣的朋友可以驻足围观。

Masonry使用高级进阶:

当页面中有用ajax载入进来的数据之后,masonry是如何重置结构的呢?下面是masonry的高级进阶阶段

append与prepend新内容:

来看这个案例的代码部分:
$('#prepend').click(function(){
var $boxes = $( boxMaker.makeBoxes() );
$container.prepend( $boxes ).masonry( 'reload' );
});

$('#append').click(function(){
var $boxes = $( boxMaker.makeBoxes() );
$container.append( $boxes ).masonry( 'appended', $boxes );
});

其中 var $boxes = $( boxMaker.makeBoxes() ); 为采用ajax方式获取新的数据,并存入$boxes中。不同的是给$container选择器prepend进内容后,直接masonry( 'reload' )即重新载入。
而append之后,需要masonry( 'appended', $boxes )这样的操作。


Masonry 与 Infinite Scroll 结合使用:

其中infinite scroll这个插件是滚动无限加载的效果。Masonry与infinite  scroll 结合起来使用效果就很完美了,现在一些轻博客的程序上就有好多此类示例。

两个插件结合起来的需要注意的地方就是ajax载入数据后的重新排版。masonry已经想到这些了,看下面代码部分:

var $container = $('#container');//元素选择器
$container.infinitescroll({
// infinite scroll 设置选项,此处略去N个字
},
//后面是Infinite的回调函数,主要部分
function( newElements ) {
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );
}
);
代码部分结束,关于上面内容的案例演示:传送

其他一些应用:

		masonry( 'destroy') masonry停止
		masonry( 'reload' ) masonry重置

Masonry一些常用的参数都在上面了,更多的功能请参考插件官方地址:Masonry

 


下载地址
收藏
希望此广告对您有帮助->关于追太阳的广告
回到顶部