四步轻松搞定瀑布流布局

最新推荐文章于 2024-08-29 08:23:38 发布

最新推荐文章于 2024-08-29 08:23:38 发布 · 325 阅读

文章标签：

#Ajax #JavaScript #XHTML #ViewUI

前端思考专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用jQuery Masonry插件轻松实现瀑布流布局。通过四步操作：准备HTML容器、引入jQuery及Masonry插件、定义CSS样式以及添加JavaScript脚本，即可在网页上展示动态的瀑布流效果。

　　瀑布流布局（Waterfall Layout），听到这个名词你不一定知道是什么，但是你看了下面的图片就会明白了。很多网站都用它来展示图片内容，比如淘宝哇哦、新浪轻博客等。

　　今天我要分享给大家的就是怎么轻松来搞定瀑布流布局。当然，我不会自己从零开始，要学会重复利用别人的东西，不要重新发明轮子。如果要看本文最新版本，请访问：http://www.vktone.com/articles/waterfall-layout-use-jquery-masonry.html 。（友情提示：本文内容在ITEYE上显示有点乱，最好访问这个地址看）

　　我用到的就是jQuery的Masonry插件，它是一个用来布局的jQuery插件。配置Masonry相当容易，只需要在jQuery脚本中的 wrapping container元素中加上.masonry()方法。官网地址：http://masonry.desandro.com/index.html 。

　　废话少说，下面来一步一步展示如何实现瀑布流布局，这个已经在www.vktone.com 博客右侧边栏中用到了。

　　第一步： 就是要把显示图片的html容器准备好，比如像下面这样

<div id="imgcontainer">
  <div class="imgitem">...</div>
  <div class="imgitem">...</div>
  <div class="imgitem">...</div>
  ...
</div>

注意：<div class= "imgitem" > ...</div>  里面装的就是你要显示的图片，也可以是带链接的图片，也可以是图片和文字的混合体。

　　第二步：加入jQuery和jQuery Masonry插件。

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

其中，jQuery下载地址：http://jquery.com/，
 　　jQuery Masonry下载地址：http://masonry.desandro.com/jquery.masonry.min.js

　　第三步： 添加css样式，特别注意要添加 float:left，其它的样式自行调整（比如添加边框border，边距margin等）。

.imgitem {
    /* width: 70px; */
    margin: 2px;
    float: left;
    border: solid 1px #ccc;
    -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s;
}

　　第四步： 添加JavaScript脚本

<script type="text/javascript">
//<![CDATA[
function masonryImages(){
    var $container = $('#imgcontainer');
    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector : '.imgitem'
            //,columnWidth: 72
        });
    });
}
$(function(){
    masonryImages();
});
//]]>
</script>

　　注意：如果显示图片的html是ajax动态加载的，加载完之后应该调用masonry()重新布局，否则有点乱。比如下面的代码，在加载完之后调用了masonryImages()。

    $.ajax({
        url: "...",
        type: "post",
        data: {
            ...
        },
        dataType: "jsonp",
        success: function(rsp){
            if (rsp && rsp.data && rsp.data.html) {
                $("#sidebar").replaceWith(rsp.data.html);
                masonryImages();
            }
        },
        error: function(){
            $("#sidebar").text("加载侧边失败！");
        }
    });

　　大功告成！ 用jQuery Masonry插件实现瀑布流布局就完成了，轻松吧！