Masonry 轻量级网页瀑布流 JavaScript 插件 - 资源分享

Masonry 轻量级网页瀑布流 JavaScript 插件

发布于 2017-07-11 字数 3329 浏览 1908 评论 0

Masonry 是一个 JavaScript 网格布局库,它的工作原理是根据可用的垂直空间将元素放置在最佳位置,类似于墙上的石匠石。你可能已经在互联网上看到它在使用。官方的说明总是那么生硬,说的直白一点就我们经常提到的瀑布流效果,利用 Position 定位元素的位置。

Masonry 轻量级网页瀑布流 JavaScript 插件

类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest ,貌似是最早使用这种布局的网站了,蘑菇街,点点网,以及淘宝最新上线的哇哦 等等。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字 — 瀑布流式布局。

Masonry是一款很好用的jquery网页布局插件,它可以去掉不同高度div之间的空白,让你的网页看上去更加的整齐、漂亮!

使用方法

简单调用

首先要引入jquery.masonry.min.js文件和jquery插件,注意引用文件的顺序。

<script src="jquery.min.js"></script>  
<script src="jquery.masonry.min.js"></script>

调用Masonry

$(function(){  
    $('#container').masonry({  
        itemSelector : '.item'    
    });  
});

使用参数

参数是以JSON的方式传入到插件函数中,和以往的其他插件的调用方法并没有不同,不过他还有其他的方式去调用,比如:

var container = document.querySelector( '#container' );
var msnry = new Masonry( container );
container.appendChild( elem );
msnry.appended( elem );
msnry.layout();

关于获取图片高度

使用imagesLoaded.js插件防止获取不到图片的高度

var $container = $('#container');  
  
$container.imagesLoaded( function(){  
    $container.masonry({  
        itemSelector : '.item'  
    });  
});

使用JS实现动画

var $container = $('#container');  

$container.imagesLoaded( function(){  
    $container.masonry({  
        itemSelector : '.item',  
        isAnimated : true  
    });  
});

无限滚动加载

$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 );   
    });  
  }  
);

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

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0