jQuery神奇的插件——Masonry(简单实现瀑布流不规

作者:人气:来源:2015-03-23

广告载入中...

国外的pinterest.com火了,随着它的页面布局方式也受到了热捧!国内很多网站都采用了pinterest(瀑布流)模式。如国内比如有名的:花瓣,蘑菇街、美丽说......

今天为大家介绍一款神奇的jquery插件——Masonry,轻松实现pinterest模式.

jQuery Masonry官网:http://masonry.desandro.com/index.html

jQuery官网丰富的示例:http://masonry.desandro.com/demos/basic-single-column.html

官网提供了丰富的示例,大家可前往官网查看,下面我将为大家介绍如何在项目中使用jQuery Masonry。

简单的JS引用,如下:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="jquery.masonry.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#container').masonry({
                itemSelector: '.box'
            });
        });
</script>

图片延迟加载的JS引用 :

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

各种不同的布局的用法可以留言交流,也可以加jQuery群进行交流:233808513

继续阅读:页面特效

分享吧:

手机移动