实现自适应图片墙-优快云博客

本文链接：https://blog.youkuaiyun.com/niujiaming0819/article/details/8542766

这里代码排版有点乱，欢迎大家看原文地址

原文地址：http://hi.baidu.com/niujiaming0819/item/92f279b3b8704a4dbb0e122f

最近浏览了一下百.度图.片，发现百.度图.片墙做的的确不错。自己也实现了一个桌面墙，在这里指说一下实现的方式吧。

其实，实现很简单，其原理如下：

1. 将页面分成5列，每一列的宽度自己可以定义

2. 计算每一列的高度

2.1 计算高度的时候要注意，必须要在图片onload之后进行计算，应为图片资源必须加载后才能看到高度（如果你的图片高度是固定的，做图片墙就换别的方式实现吧，那样太容易了。）

3. 得到了每一列的高度后，选取那个最短的列，将图片append到这一列后面

下面是实现的关键代码：

 
        //获取最短列，例子中共有5列 
       
        function  
        get_min_height_column(){ 
       
        column_1_height = $( 
        '#column_1' 
        ).outerHeight( 
        true 
        ) + $( 
        '#column_1' 
        ).offset().top; 
       
        column_2_height = $( 
        '#column_2' 
        ).outerHeight( 
        true 
        ) + $( 
        '#column_2' 
        ).offset().top; 
       
        column_3_height = $( 
        '#column_3' 
        ).outerHeight( 
        true 
        ) + $( 
        '#column_3' 
        ).offset().top; 
       
        column_4_height = $( 
        '#column_4' 
        ).outerHeight( 
        true 
        ) + $( 
        '#column_4' 
        ).offset().top; 
       
        column_5_height = $( 
        '#column_5' 
        ).outerHeight( 
        true 
        ) + $( 
        '#column_5' 
        ).offset().top; 
       
        min_height = Math.min(column_1_height, column_2_height); 
       
        min_height = Math.min(min_height, column_3_height); 
       
        min_height = Math.min(min_height, column_4_height); 
       
        min_height = Math.min(min_height, column_5_height); 
       
        content =  
        null 
        ; 
       
        if 
        (column_1_height == min_height) { 
       
        content = $( 
        '#column_1' 
        ); 
       
        } 
       
        else  
        if 
        (column_2_height == min_height) { 
       
        content = $( 
        '#column_2' 
        ); 
       
        } 
       
        else  
        if 
        (column_3_height == min_height) { 
       
        content = $( 
        '#column_3' 
        ); 
       
        } 
       
        else  
        if 
        (column_4_height == min_height) { 
       
        content = $( 
        '#column_4' 
        ); 
       
        } 
       
        else  
        { 
       
        content = $( 
        '#column_5' 
        ); 
       
        } 
       
        return  
        content; 
       
        } 
       
        //将result数组中的第index元素添加到图片墙中 
       
        function  
        add_one_album(albums, index){ 
       
        if 
        (index >= albums.length)  
        return  
        ;  
        //如果index已经大于了albums的最大长度，直接返回 
       
        min_column = get_min_height_column(); 
        //获取最短的列 
       
        var  
        album = $( 
        '#album' 
        ).html(); 
        //获取存放图片的模板（我自己用div等包转了一下图片） 
       
        album = album.replace( 
        '@src' 
        , albums[index][ 
        'a_cover_url' 
        ]); 
       
        album = album.replace( 
        '@cur_index' 
        , cur_index); 
       
        album = album.replace( 
        '@a_id' 
        , albums[index][ 
        'a_id' 
        ]); 
       
        $(album).find( 
        'img' 
        )[0].onload =  
        function 
        (){  
        //注意这里，需要在图片加载完成后再显示下一张图片 
       
        add_one_album(albums, index + 1); 
       
        }; 
       
        min_column.append(album); 
        //将这个图片添加到最短列中 
       
        $( 
        '#cur_index_' 
        +cur_index).show();  
        //显示这个图片 
       
        cur_index = cur_index + 1; 
       
        } 
       
        //访问这个url会得到一个图片地址的json串 
       
        function  
        add_more(url){ 
       
        $.getJSON(url,  
        function 
        (result){ 
       
        add_one_album(result, 0); 
       
        }); 
       
        }