YUI Masonry - 快速打造 Pinterest 流布局

2012年8月9日

自從 Pinterest 成為近期內熱門的網站後,其強烈視覺風格的瀑布流版型在短時間內成為眾網站仿效的對象。不久前實作 Shopping+ 購物搜尋時意外發現 YUI 竟然沒有對應的外掛可以使用,於是便興起了打造  YUI Masonry  並開源貢獻給社群的念頭。

專案名稱:YUI Masonry

快速上手

YUI Masonry 的使用方法很容易,只要短短幾行程式碼即可創造出類似 Pinterest 的瀑布流佈局效果:

<!--Include YUI seed on your page.-->
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
<script>
YUI().use('gallery-masonry', function (Y) {
    var masonry = new Y.Masonry({
        node: '#container',
        itemSelector: '.item'
    });
});
</script>
    

線上文件

YUI Masonry 官方網站可以找到更多進階的用法與範例程式碼:


YUI Masonry 使用 YUIDoc 建立的 API 文件,方便開發者查詢 Masonry 物件裡的屬性與方法:

Open Source on YUI Gallery

YUI Masonry 的原始碼是公開的,您可以在 GitHub 上找到原始碼。此外,YUI Masonry 也貢獻給了 YUI Gallery 社群,所有的檔案都 Host 在 Yahoo! 的 CDN 服務上,開發者完全不需要自行 Host,也不需要擔心網路效能問題:

Reference

0 意見 :

Related Posts Plugin for WordPress, Blogger...