自定義多列瀑布流功能

時間 2019-11-11

原文原文鏈接

html代碼javascript

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta />
    </head>
    <body>
        <div class="flow" id="flow_container"></div>
    </body>
</html>

css代碼css

<style type="text/css">
     .flow{overflow:hidden;}
     .flow .column{width: 200px;float:left;margin-right: 10px;}
     .flow .item{width: 200px;height: autp;overflow:hidden;border-radius: 8px;margin-bottom: 10px;float:left;}
     .flow .item img{width: 100%;height: 100%;display:block;}
</style>

javascript代碼html

<script type="text/javascript">
            var picGroup = [
                'http://hbimg.b0.upaiyun.com/eb097302d1d086785822c354a3b47ff24701a6b67a22-4tnaLv_fw658',
                'http://tc.sinaimg.cn/maxwidth.2048/tc.service.weibo.com/mmbiz_qpic_cn/add9770a239293bdc638cb7aa73b8e9f.jpg',
                'http://pic.9ht.com/up/2018-1/15154658375116956.jpg',
                'http://www.icauto.com.cn/upload/allimg/161009/05114T4P-0.jpg',
                'http://img3.yxlady.com/yl/UploadFiles_5361/20150720/20150720190410239.jpg',
                'http://b.hiphotos.baidu.com/image/pic/item/32fa828ba61ea8d3fcd2e9ce9e0a304e241f5803.jpg',
                'http://e.hiphotos.baidu.com/image/pic/item/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',
                'http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
                'http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg',
                'http://a.hiphotos.baidu.com/image/pic/item/f603918fa0ec08fa3139e00153ee3d6d55fbda5f.jpg',
                'http://e.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9eac1754f45df39b6003bf3b396.jpg',
            ];
            // 初始化 
            initFlow({
                el: 'flow_container',
                images: picGroup,
                column: 5,
                success: function(res){
                    console.log('成功的回調函數', res);
                }
            });
            /**
             * el: 容器id
             * images: 圖片數組
             * column: 顯示的列數 大於1
             * success: 成功後的回調函數
             *    
            */
            function initFlow(options){
                var images = options.images;
                let html = '';
                if(options.column> 2){
                    mutilColumn(images);
                }else{
                    formatter(images);
                }
                // 調用成功的回調函數
                // aa();
                // function aa(){
                //     let str = 'test';
                //     options.success(str);
                // }
                // 2列
                function formatter(images){
                    let left = document.createElement('div');
                    left.className = 'column';
                    left.id = 'left';
                    let right = document.createElement('div');
                    right.className = 'column';
                    right.id = 'right';
                    document.getElementById(options.el).appendChild(left);
                    document.getElementById(options.el).appendChild(right);
                    // 圖片
                    for(let i=0;i< images.length;i++){
                        // 計算兩列的高度
                        let leftHeight = document.getElementById('left').clientHeight;
                        let rightHeight = document.getElementById('right').clientHeight;
                        // 建立元素
                        let item = document.createElement("div");;
                        item.className = 'item';
                        let img = document.createElement('img');
                        img.src = images[i];
                        item.appendChild(img);
                        if(leftHeight> rightHeight){
                            right.appendChild(item);
                        }
                        else if(rightHeight >= leftHeight){
                            left.appendChild(item);
                        }
                    }
                }
                // 多列
                function mutilColumn(images){
                    // 建立了列層
                   let idGroup = createMutilColumn();
                    // 追加圖片
                    createImage(idGroup);
                }
                // 建立多列
                function createMutilColumn(){
                    let array = [];
                    for(let i=0;i<options.column;i++){
                            let temp = document.createElement('div');
                            temp.className = 'column';
                            temp.id = 'column'+i;
                            document.getElementById(options.el).appendChild(temp);
                            array.push({id: temp.id})
                        }
                    return  array;
                }
                // 得到每列的當前高度
                function getMutilColumnHeight(divGroup){
                    let newDivGroup = [];
                    for(let i=0;i<divGroup.length;i++){
                        let tempHeight = document.getElementById(divGroup[i].id).clientHeight;
                        newDivGroup.push({'id': divGroup[i].id, height:tempHeight});
                    }
                    newDivGroup.sort(function(a,b){
                       return a.height - b.height;
                    });
                    return newDivGroup;
                }
                // 建立圖片元素
                function createImage(idGroup){
                    // 圖片
                    for(let i=0;i< images.length;i++){
                        // 建立元素
                        let item = document.createElement("div");;
                        item.className = 'item';
                        let img = document.createElement('img');
                        img.src = images[i];
                        item.appendChild(img);

                        // 計算多列的高
                        let group = getMutilColumnHeight(idGroup);
                        document.getElementById(group[0].id).appendChild(item);
                    }
                }