Jquery Masonry + imagesLoaded 插件实现的瀑布流布局

admin

研究了一下 Jquery 的两个实现瀑布流的插件，一个是 WookMark 一个就是 Masonry。其中前者专门为了实现图片瀑布流功能，而后者则是为了实现 div 的瀑布流布局排列。

都试了一下之后，选择了 Masonry 插件，因为对 html 结构的要求更低，实现起来逻辑看着更清楚。

首先引入 jquery.masonry.min.js jquery.masonry.min.js (5.38 KB, 下载次数: 3)

2014-6-16 09:51 上传

点击文件名下载附件

和 jquery.min.js jquery.min.js (90.46 KB, 下载次数: 0)

2014-6-16 09:51 上传

点击文件名下载附件

HTML 代码：
    <div class="container">
        <div id="images">
            <div class="items"><img src="http://www.2345.com/girl/mm/swmt8.jpg"><p>描述文字</p></div>
            <div class="items"><img src="http://05land.com/img/sae/1.jpg"><p>描述文字</p></div>
            <div class="items"><img src="http://05land.com/img/sae/2.jpg"><p>描述文字</p></div>
            <div class="items"><img src="http://05land.com/img/sae/4.jpg"><p>描述文字</p></div>
            <div class="items"><img src="http://05land.com/img/sae/5.jpg"><p>描述文字</p></div>
            <div class="items"><img src="http://05land.com/img/sae/6.jpg"><p>描述文字</p></div>
            <div class="items"><img src="http://05land.com/img/sae/7.jpg"><p>描述文字</p></div>
        </div>
    </div>

CSS 代码：
    .items {
        width: 195px;
        margin: 0 8px 14px 0;
        text-align:center;
        padding: 10px;
        float: left;  // 必须要有，使 div 先横向排列，然后 Masonry 插件才能生效
        display: none; // 优化显示需求
        border: 1px solid #DDD;
        background: #EEE;
        -moz-box-shadow:0 1px 3px rgba(0, 0, 0, .3);
        -webkil-box-shadow:0 1px 3px rgba(0, 0, 0, .3);
        box-shadow:0 1px 3px rgba(0, 0, 0, .3);
    }
    .items img {
        width: 185px;
    }

CSS 代码中，必须的就是对元素 float 的描述，其次 display 默认为不可见，为了能够在图片加载之后再显示出来，使得用户体验更好。同时使用了一些 css3 的属性，声明了每个“砖块”的阴影。

JS代码：
    <script src="http://js.jrjimg.cn/lib/jquery.masonry.min.js "></script>
    <script type="text/javascript">
    $(document).ready(
        function() {
            var container = $('#images .items');
            var masonryContainer = $('#images');
            container.imagesLoaded(function(){
                container.fadeIn();
                masonryContainer.masonry({
                    itemSelector : '.items',
                    isAnimated: true,
                });
            });
        }
    );

JS 代码在页面加载完成后执行，同时，使用了 imagesloaded 插件，来在砖块元素图片加载完成后再调用 masonry 插件。调用 masonry 的元素应该是所有 items 最外层的元素，而同时判断了所有 items 元素图片加载成功之后才将元素显示出来。