diff --git a/bricks/dynamiccolumn.js b/bricks/dynamiccolumn.js
new file mode 100644
index 0000000..70fc80f
--- /dev/null
+++ b/bricks/dynamiccolumn.js
@@ -0,0 +1,53 @@
+var bricks = window.bricks || {};
+
+bricks.DynamicColumn = class extends bricks.Layout {
+	/*
+	{
+		mobile_cols:
+		col_cwidth:
+		col_cgap:
+		col_width:
+	}
+	*/
+	constructor(opts){
+		if (! opts.col_cwidth){
+			if(! opts.col_width){
+				opts.col_cwidth = 20;
+			}
+		}
+		opts.col_cgap = opts.col_cgap || 0.5;
+		opts.mobile_cols = opts.mobile_cols|| 1;
+		super(opts);
+		this.set_style('display', 'grid');
+		this.set_column_width();
+		this.bind('resize', this.set_column_width.bind(this));
+		if (this.cwidth){
+			bricks.app.bind('charsize', this.set_column_width.bind(this));
+		}
+	}
+	set_column_width(){
+		bricks.debug('set_column_width() called ....');
+		var cw;
+		var cols;
+		var gap;
+		var width = this.get_width();
+		if (this.col_cwidth){
+			cw = bricks.app.charsize * this.col_cwidth;
+		} else {
+			cw = this.col_width;
+		}
+		gap = bricks.app.charsize * this.col_cgap;
+		if (width > 0){
+			if (bricks.is_mobile()){
+				if (width < this.get_height()){
+					cw = (width - (cols - 1) * gap) / this.mobile_cols;
+					alert('here: width=' + width + ' height=' +  this.get_height())
+				}
+			}
+			cols = Math.floor(width/cw);
+			cw = (width - (cols - 1) * gap) / cols;
+		}
+		this.dom_element.style.gridTemplateColumns = "repeat(auto-fill, minmax(" + cw + "px, 1fr))";
+		this.set_style('gap', gap + 'px');
+	}
+}
diff --git a/bricks/page_data_loader.js b/bricks/page_data_loader.js
new file mode 100644
index 0000000..320aa1c
--- /dev/null
+++ b/bricks/page_data_loader.js
@@ -0,0 +1,89 @@
+var bricks = window.bricks || {};
+bricks.PageDataLoader = class {
+	/*
+	options:
+	{
+		"url":
+		"cache_pages":
+		"pagerows":
+		"method":
+		"params":
+	}
+	usage:
+	var p = new PageDataLoader({...});
+	p.loadData(); // return page(1) data
+	p.nextPage()
+	p.previousPage() 
+
+	*/
+	constructor(options){
+		this.data_url = options.url;
+		this.base_params = options.params || {};
+		this.rows = options.pagerows || 80;
+		this.cache_pages = options.cache_pages || 5;
+		this.method = options.method || 'GET';
+		this.pages = [];
+	}
+	async loadData(params){
+		params = params || {};
+		this.pages = [];
+		var _params = bricks.extend({}, this.base_params);
+		this.params = bricks.extend(_params, params);
+		return await this.loadPage(1);
+	}
+	is_max_page(p){
+		return p == Math.max(...this.pages);
+	}
+	async loadNextPage(){
+		var page = Math.max(...this.pages) + 1;
+		if (page < this.lastPage){
+			var d = await this.loadPage(page);
+			var p = this.pages.length - 1;
+			d.pos_rate = p / this.pages.length;
+			return d;
+		}
+	}
+	async loadPreviousPage(){
+		var page = Math.min(...this.pages) - 1;
+		if (page > 0){
+			var d = await this.loadPage(page);
+			d.pos_rate = 1 / this.pages.length;
+			return d;
+		}
+	}
+	async loadPage(page) {
+		if (this.pages.indexOf(page) == -1) {
+			var jc = new bricks.HttpJson();
+			var params = bricks.extend({}, this.params);
+			params = bricks.extend(params,{
+				page:page, 
+				rows:this.rows
+			});
+			var d = await jc.get(this.data_url,{params:params});
+			if (!d){
+				bricks.debug(this.data_url,{params:params}, 'error');
+				this.loading = false;
+				return;
+			}
+			this.lastPage = Math.ceil(d.total / this.rows);
+			d.last_page = this.lastPage;
+			this.pages.push(page);
+			d.add_page = page;
+			// 检查缓存是否已满
+			if (this.pages.length > this.cache_pages) {
+				// 删除当前页最远的一页
+				var max, min;
+				max = Math.max(...this.pages);
+				min = Math.min(...this.pages);
+				const farthestPage = page == max? min : max;
+				var idx = this.pages.indexOf(farthestPage);
+				this.pages.splice(idx, 1);
+				d.delete_page = farthestPage;
+			}
+			return d;
+		} else {
+			bricks.debug(page, 'already n buffer, do not thing');
+		}
+		return;
+	}
+}