diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..65df6b9
Binary files /dev/null and b/.DS_Store differ
diff --git a/examples/.DS_Store b/examples/.DS_Store
new file mode 100644
index 0000000..eabb966
Binary files /dev/null and b/examples/.DS_Store differ
diff --git a/examples/common/mockData.js b/examples/common/mockData.js
new file mode 100644
index 0000000..9242f42
--- /dev/null
+++ b/examples/common/mockData.js
@@ -0,0 +1,72 @@
+module.exports = [
+ {
+ "price": "¥39.00",
+ "title": "春装显瘦休闲小脚铅笔长裤",
+ "pic": "http://imgtest.meiliworks.com/pic/t/9d/18/5d73d3929b4b83b22c6e253d6823_640_900.cf.jpg",
+ "discount": "4.0折",
+ "link":"http://www.meilishuo.com/"
+ },
+ {
+ "price": "¥39.00",
+ "title": "春装显瘦休闲小脚铅笔长裤",
+ "pic": "http://d03.res.meilishuo.net/pic/t/7a/80/2473169c23030b561c6cf4711f9f_640_900.ch.jpg",
+ "discount": "4.0折",
+ "link":"http://www.meilishuo.com/"
+ },
+ {
+ "price": "¥39.00",
+ "title": "春装显瘦休闲小脚铅笔长裤",
+ "pic": "http://imgtest.meiliworks.com/pic/t/9d/18/5d73d3929b4b83b22c6e253d6823_640_900.cf.jpg",
+ "discount": "4.0折",
+ "link":"http://www.meilishuo.com/"
+ },
+ {
+ "price": "¥39.00",
+ "title": "春装显瘦休闲小脚铅笔长裤",
+ "pic": "http://d01.res.meilishuo.net/pic/t/fb/86/ca54092285b6aa8d779c75d930a4_640_900.ch.jpg",
+ "discount": "4.0折",
+ "link":"http://www.meilishuo.com/"
+ },
+ {
+ "price": "¥39.00",
+ "title": "春装显瘦休闲小脚铅笔长裤",
+ "pic": "http://d02.res.meilishuo.net/pic/t/84/c8/3253dd63c6e627e0a7921eb8cad2_640_900.cc.jpg",
+ "discount": "4.0折",
+ "link":"http://www.meilishuo.com/"
+ },
+ {
+ "price": "¥39.00",
+ "title": "春装显瘦休闲小脚铅笔长裤",
+ "pic": "http://d03.res.meilishuo.net/pic/t/41/69/29a396f538b9c4197479b8164c49_640_900.cg.jpg",
+ "discount": "4.0折",
+ "link":"http://www.meilishuo.com/"
+ },
+ {
+ "price": "¥39.00",
+ "title": "春装显瘦休闲小脚铅笔长裤",
+ "pic": "http://imgtest.meiliworks.com/pic/t/9d/18/5d73d3929b4b83b22c6e253d6823_640_900.cf.jpg",
+ "discount": "4.0折",
+ "link":"http://www.meilishuo.com/"
+ },
+ {
+ "price": "¥39.00",
+ "title": "春装显瘦休闲小脚铅笔长裤",
+ "pic": "http://d02.res.meilishuo.net/pic/t/55/bf/29e46e5ee29115421ddb5ee4d1f2_640_900.ch.jpg",
+ "discount": "4.0折",
+ "link":"http://www.meilishuo.com/"
+ },
+ {
+ "price": "¥39.00",
+ "title": "春装显瘦休闲小脚铅笔长裤",
+ "pic": "http://imgtest.meiliworks.com/pic/t/9d/18/5d73d3929b4b83b22c6e253d6823_640_900.cf.jpg",
+ "discount": "4.0折",
+ "link":"http://www.meilishuo.com/"
+ },
+ {
+ "price": "¥39.00",
+ "title": "韩版长袖露肩宽松打底衬衫",
+ "pic": "http://d04.res.meilishuo.net/pic/t/75/ce/42bef0ac5a2e0308f1d7aad99b7d_640_900.ch.jpg",
+ "discount": "2.8折",
+ "link":"http://www.meilishuo.com/"
+ }
+];
diff --git a/examples/waterfall/.DS_Store b/examples/waterfall/.DS_Store
new file mode 100644
index 0000000..4ed10da
Binary files /dev/null and b/examples/waterfall/.DS_Store differ
diff --git a/examples/waterfall/app.js b/examples/waterfall/app.js
new file mode 100644
index 0000000..252ea2c
--- /dev/null
+++ b/examples/waterfall/app.js
@@ -0,0 +1,101 @@
+/** @jsx React.DOM */
+
+'use strict';
+
+var React = require('react');
+var ReactCanvas = require('react-canvas');
+var Item = require('./components/Item');
+
+var data = require('../common/mockData');
+
+var Surface = ReactCanvas.Surface;
+var ListView = ReactCanvas.ListView;
+
+var App = React.createClass({
+
+ render: function () {
+ var size = this.getSize();
+ return (
+
+
+
+ );
+ },
+ scroll:function(listViewIns,top){
+ var self = this;
+ if(typeof this.scrollState === 'undefined'){
+ this.scrollState = 1;
+ }
+
+ var scrollHeight = this.getNumberOfItems() * Item.getItemHeight();
+ var distance = Item.getItemHeight() * 2;
+
+ if(this.scrollState && (top + distance >= scrollHeight) ){
+
+ this.scrollState = 0;
+
+ var style = this.getListViewStyle();
+
+ listViewIns.scroller.setDimensions(style.width, style.height, style.width, scrollHeight - (Item.getItemHeight() - Item.getLodingHeight()));
+
+ setTimeout(function(){
+ data = data.concat(data);
+
+ listViewIns.updateScrollingDimensions();
+ self.scrollState = 1;
+ },2000);
+ }
+ },
+
+ renderItem: function (itemIndex, scrollTop) {
+ var rowNum = Item.getRowNums();
+ var rowData = [];
+
+ for (var i = itemIndex; i < itemIndex + rowNum; i++) {
+ rowData.push(data[itemIndex + i]);
+ };
+
+ if(itemIndex + 1 === this.getNumberOfItems()){
+ var loding = true;
+ }
+
+ return (
+
+ );
+ },
+
+ getSize: function () {
+ return document.getElementById('main').getBoundingClientRect();
+ },
+
+ getListViewStyle: function () {
+ return {
+ top: 0,
+ left: 0,
+ width: window.innerWidth,
+ height: window.innerHeight
+ };
+ },
+
+ getNumberOfItems: function () {
+ return Math.ceil(data.length / Item.getRowNums());
+ },
+
+});
+
+React.render(, document.getElementById('main'));
+
+
diff --git a/examples/waterfall/components/.DS_Store b/examples/waterfall/components/.DS_Store
new file mode 100644
index 0000000..a3a1ded
Binary files /dev/null and b/examples/waterfall/components/.DS_Store differ
diff --git a/examples/waterfall/components/Item.js b/examples/waterfall/components/Item.js
new file mode 100644
index 0000000..f7d4aed
--- /dev/null
+++ b/examples/waterfall/components/Item.js
@@ -0,0 +1,160 @@
+/** @jsx React.DOM */
+
+'use strict';
+
+var React = require('react');
+var ReactCanvas = require('react-canvas');
+
+var FontFace = ReactCanvas.FontFace;
+var measureText = ReactCanvas.measureText;
+var Group = ReactCanvas.Group;
+var Image = ReactCanvas.Image;
+var Text = ReactCanvas.Text;
+
+var Item = React.createClass({
+
+ propTypes: {
+ width: React.PropTypes.number.isRequired,
+ height: React.PropTypes.number.isRequired,
+ data: React.PropTypes.object.isRequired,
+ itemIndex: React.PropTypes.number.isRequired,
+ },
+
+ statics: {
+ getItemHeight: function () {
+ return 300;
+ },
+ getLodingHeight: function(){
+ return 30;
+ },
+ getRowNums: function(){
+ return 2;
+ }
+ },
+
+ truncate : function(text,style){
+ var maxWidth = 1000;
+ var textMetrics = measureText(text, maxWidth, style.fontFace, style.fontSize, style.lineHeight);
+ var actualWidth = textMetrics.width;
+ if(actualWidth >= style.width){
+ var perLen = actualWidth / text.length;
+ var textNum = parseInt(style.width / perLen);
+ text = text.substr(0, textNum - 2 ) + '...';
+ }
+ return text;
+ },
+
+ render: function () {
+ var self = this;
+
+ var rowItems = this.props.data.map(function(item,index){
+ var rowImageStyle = self.getImageStyle(index);
+ var rowTitStyle = self.getTitleStyle(index);
+ var priceStyle = self.getPriceStyle(index);
+ var btnStyle = self.getBtnStyle(index);
+
+ var text = self.truncate(item.title,self.getTitleStyle(index));
+
+ return (
+
+
+
+ {text}
+ {item.price}
+ 马上抢购
+
+
+ );
+ });
+
+ if(this.props.loding){
+ return (
+
+ loding...
+
+ )
+ }
+
+ return (
+
+ {rowItems}
+
+ );
+ },
+
+ btnClick : function(data){
+ return function(){
+ location.href = data.link;
+ }
+ },
+
+ getStyle: function () {
+ return {
+ width: this.props.width,
+ height: Item.getItemHeight()
+ };
+ },
+
+ getRowWidth : function(){
+ return this.props.width / Item.getRowNums();
+ },
+
+ getRowLeft : function(index){
+ return this.getRowWidth() * index;
+ },
+
+ getImageStyle: function (index) {
+ return {
+ top: 5,
+ left: this.getRowLeft(index) + 5,
+ width: this.getRowWidth() - 5,
+ height: 190,
+ backgroundColor: '#ddd',
+ borderColor: '#999',
+ borderWidth: 1
+ };
+ },
+
+ getPriceStyle: function (index) {
+ return {
+ top: 230,
+ left: this.getRowLeft(index),
+ width: 170,
+ height: 18,
+ fontSize: 18,
+ lineHeight: 18,
+ color:'red'
+ };
+ },
+
+ getBtnStyle: function(index){
+ return {
+ top: 260,
+ left: this.getRowLeft(index),
+ width: 90,
+ height: 25,
+ textAlign: 'center',
+ borderRadius : 10,
+ fontSize: 18,
+ lineHeight: 25,
+ backgroundColor: 'red',
+ color:'#fff'
+ };
+ },
+
+ getTitleStyle: function (index) {
+ return {
+ top: 210,
+ left: this.getRowLeft(index),
+ width: this.getRowWidth(),
+ fontFace: FontFace('Georgia, serif'),
+ height: 20,
+ fontSize: 14,
+ lineHeight: 20,
+ color:'#666'
+ };
+ }
+
+});
+
+module.exports = Item;
diff --git a/examples/waterfall/index.html b/examples/waterfall/index.html
new file mode 100644
index 0000000..780c5b8
--- /dev/null
+++ b/examples/waterfall/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+ Canvas
+
+
+
+
+
+
+
diff --git a/lib/ListView.js b/lib/ListView.js
index 7046cd8..a62384d 100644
--- a/lib/ListView.js
+++ b/lib/ListView.js
@@ -100,7 +100,7 @@ var ListView = React.createClass({
handleScroll: function (left, top) {
this.setState({ scrollTop: top });
if (this.props.onScroll) {
- this.props.onScroll(top);
+ this.props.onScroll(this,top);
}
},
diff --git a/webpack.config.js b/webpack.config.js
index 00231d6..19470fe 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,7 +6,8 @@ module.exports = {
entry: {
'listview': ['./examples/listview/app.js'],
'timeline': ['./examples/timeline/app.js'],
- 'css-layout': ['./examples/css-layout/app.js']
+ 'css-layout': ['./examples/css-layout/app.js'],
+ 'waterfall': ['./examples/waterfall/app.js']
},
output: {