mosaic布局

举例：

Ext.define('Cao.view.EventMosaic', {
    extend: 'Ext.Container',
    xtype: 'EventMosaic',
    requires: [ ],
    config: {
        cls : 'gallery',
        store:'apiEventsStore',
        scrollable : true,
        tpl : Ext.create('Ext.XTemplate', 
            '<tpl if="this.isEmpty(Events)">',
            '<div class="empty-text empty-gallery">No image available</div>',
            '</tpl>',
            '<div class="gallery" id="photos">',
            '<tpl for="Events">',
            '<div class="imgbox">',
            '<img src="{Pic}" class="thumbnail" data-id="{Id}" data-title="{Title:this.decode}" data-fullimage="{Pic:this.getFullImage}" />',
            '<p>{Title:this.decode}</p>',
            '</div>',
            '</tpl>',
            '</div>', {
                        isEmpty : function(items){
                            if(items.length === 0){
                                return true;
                            }
                            return false;
                        },
                        
                        getThumbnail : function(url){
                            //return url.replace('_m', '_t');
                            return url;
                        },
                        
                        getFullImage : function(url){
                            //return url.replace('_m', '_n');
                            return url;
                        },

                        decode: function(name){
                            return Ext.Object.getKeys(Ext.Object.fromQueryString(name))[0];
                        }
            })
    },
                
    initialize : function(){
        var me = this;
        
        // Add tap event on the images to open the carousel
        me.element.on('tap', function(e, el){
                //me.showEventCarousel(el);    
                me.showEventDetail(el);
            }, me, {
                delegate : 'img.thumbnail'
        });
        
        me.loadImages();
        me.callParent(arguments);
    },
        
    /**
        * Load the images and add them to the gallery container
        * Here is the point where you have to change the fetching mechanism 
        * say to get data with proxy and save in a Store.
        * Also, you may have to change the   
        */
    loadImages : function(){
        var homeStore = Ext.getStore('apiEventsStore'),
        me = this;
        
        homeStore.load({
            callback: function(records, operation, success) {
                var record = records[0]; //Get the first record
                var data = record.getData(); //Get the data from the record 

                me.events = data.Events;
                me.setData(data);
            },
            scope: this
        });
    },        
    
    showEventDetail : function(clickedImage) {
        var eveId = clickedImage.getAttribute('data-id'),
        eveTitle = clickedImage.getAttribute('data-title'),
        console.log(eveId+'   '+eveTitle);
    }

});

其中store:'apiEventsStore'==自己写的store和model，就不贴了。

css:

/* 
    Document   : gallery
    Created on : Apr 18, 2013, 8:08:10 PM
    Author     : SWARNENDU
    Description:
        Purpose of the stylesheet follows.
*/

root {
	display: block;
}
/*body, .gallery.x-container {
	background: url(http://freeiphonehdwallpaper.com/wp-content/uploads/blue-texture-iphone-hd-wallpaper-320x480.jpg);
	background-size: 100% 100%;
}*/
/************************* Gallery *******************************/
	/* Prevent vertical gaps */
#photos {
	line-height: 0;
	-webkit-column-count: 2;
	-webkit-column-gap: 0px;
	margin:10px 1px 0 7px;
}
#photos .imgbox {
	width: 97% !important;
	height: auto !important;
	margin: 0px 0px 10px 0px;
	padding:3px;
	background: #fff;
	-webkit-box-shadow: 0 2px 4px #999;
	box-shadow: 0 2px 4px #999;
}
#photos img {
	width: 100% !important;
	height: auto !important;
}
#photos .imgbox p {
	margin: 0;
	line-height: 18px;
	padding: 5px;
	font-size: 14px;
}
/************************* Gallery ENDS *******************************/

/*********************** Gallery Carousel *************************/

.gallery {
	background: #D7D6DA;
}
.gallery-carousel {
	z-index: 20;
	background: rgba(0,0,0,0.7);
}
.gallery-item {
	max-width: 100%;/*				margin-left: 1%;*/
}
.gallery-carousel .x-carousel-item .x-innerhtml {
	height: 100% !important;
	display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-pack: center;
}
.gallery-carousel .x-carousel-indicator-dark span {
	background-color: rgba(255,255,255,0.3) !important;
}
.gallery-carousel .x-carousel-indicator-dark span.x-carousel-indicator-active {
	background-color: rgba(255,255,255,1) !important;
}
.gallery-carousel .close-gallery {
	position: absolute;
	-webkit-mask-image: url(../images/close.png);
	-webkit-mask-repeat: no-repeat;
	background: #fff;
	-webkit-mask-size: 32px;
	height: 32px;
	width: 32px;
	margin: 10px;
	right: 0;
}
.gallery-carousel .x-carousel-item .x-innerhtml {
	text-align : center;
}
.gallery-carousel .item {
	max-width : 100%;
	max-height : 100%;
}
.gallery-carousel .nav {
	-webkit-mask: url(../images/arrow.png) no-repeat;
	background: #fff;
	min-width: 16px;
	min-height: 16px;
	-webkit-mask-position: 12px 6px;
}
.gallery-carousel .gallery-left {
	-webkit-transform: rotate(180deg);
}
.gallery-carousel .gallery-right {
}
.gallery-carousel .gallery-bottombar .x-title {
	font-size: 14px !important;
	color : #fff;
}


/*********************** Gallery Carousel ENDS *************************/

　　

效果图图: