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();

布局展示