up

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/"
+	}
+];

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 (
+      <Surface top={0} left={0} width={size.width} height={size.height}>
+        <ListView
+          onScroll={this.scroll}
+          snapping={true}
+          scrollingDeceleration={0.92}
+          scrollingPenetrationAcceleration={0.13}
+          style={this.getListViewStyle()}
+          numberOfItemsGetter={this.getNumberOfItems}
+          itemHeightGetter={Item.getItemHeight}
+          itemGetter={this.renderItem} />
+      </Surface>
+    );
+  },
+  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 (
+      <Item
+        loding={loding}
+        width={this.getSize().width}
+        height={Item.getItemHeight()}
+        data={rowData}
+        itemIndex={itemIndex} />
+    );
+  },
+
+  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(<App />, document.getElementById('main'));
+
+

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 (
+            <Group>
+              <Image style={rowImageStyle} src={item.pic} fadeIn={true}  />
+              <Group>
+                <Text style={rowTitStyle}>{text}</Text>
+                <Text style={priceStyle}>{item.price}</Text>
+                <Text onClick={self.btnClick(item)} style={btnStyle}>马上抢购</Text>
+              </Group>
+            </Group>
+        );
+    });
+
+    if(this.props.loding){
+      return (
+        <Group>
+          <Text style={{width:this.props.width,height:30,textAlign:'center'}}>loding...</Text>
+        </Group>
+      )
+    }
+
+    return (
+      <Group style={this.getStyle()}>
+        {rowItems}
+      </Group>
+    );
+  },
+
+  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;

examples/waterfall/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Canvas</title>
+  <style>
+
+    html, body {
+      margin: 0;
+      padding: 0;
+      font: 16px Helvetica, sans-serif;
+      height: 100%;
+      overflow: hidden;
+      background: #ddd;
+    }
+
+    #main {
+      background: #fff;
+      position: relative;
+      height: 100%;
+      max-width: 420px;
+      max-height: 700px;
+    }
+
+  </style>  
+</head>
+<body>
+  <div id="main"></div>
+  <script src="/build/waterfall.js"></script>
+</body>
+</html>

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);
     }
   },
 

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: {