四步轻松搞定瀑布流布局

scjcjlu 2013-01-14

瀑布流布局(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插件实现瀑布流布局就完成了,轻松吧!


 

相关推荐