easyui panel 瀑布流式布局

    oa.page = {
        layout: $('<div></div>').appendTo(oa.dom.tabs.tabPanel),
        layoutCenter: null,
        /*layout布局*/
        initLayout: function () {
            this.layout.layout({
                fit: true
            });
            this.layout.layout('add', {
                border: false,
                region: 'center'
            });
            oa.page.layoutCenter = this.layout.layout('panel', 'center');
            this.layoutCenter.css({position: 'relative'});
        },

        initPanels: function () {
            var panelData = [
                {id: 'ct', col: 1, cls: 'theme-panel-green', hidden: false, title: '春光明媚'},
                {id: 'xt', col: 2, cls: 'theme-panel-red', hidden: false, title: '夏日炎炎'},
                {id: 'qt', col: 1, cls: 'theme-panel-blue', hidden: false, title: '秋高气爽'},
                {id: 'dt', col: 1, cls: 'theme-panel-orange', hidden: false, title: '冬雪皑皑'}
            ];
            var panelOpts = {height: 260, width: 30, left: 2.5, top: 0, col: 0};
            var $panel;
            $.each(panelData, function (idx, data) {
                if (!data.hidden) {
                    /*当超过3列就换行*/
                    panelOpts.col += data.col;
                    /*panel面板的宽*/
                    var width = data.col * panelOpts.width + (data.col - 1) * 2.5;
                    $panel = $('<div></div>').appendTo(oa.page.layoutCenter)
                            .panel({
                                border: true,
                                cls: data.cls,
                                col: data.col,
                                height: panelOpts.height,
                                width: width + '%',
                                hidden: data.hidden,
                                id: data.id,
                                style: {position: 'absolute', left: panelOpts.left + '%', top: panelOpts.top},
                                title: data.title
                            });
                    panelOpts.left = panelOpts.col % 3 === 0 ? 2.5 : width + panelOpts.left + 2.5;
                    panelOpts.top += panelOpts.col % 3 === 0 ? panelOpts.height + 25 : 0;
                }
            });
        }
    };
    oa.page.initLayout();
    oa.page.initPanels();

布局展示