From 6a489d96da66ae0831826577faaea9b1641f886a Mon Sep 17 00:00:00 2001
From: Andrew Blowe <tehandyb@gmail.com>
Date: Thu, 28 May 2015 17:40:45 -0400
Subject: [PATCH] changed child height calculation to include element margin.
 no more jitter

---
 dist/LazyRender.js     | 11 ++++++++---
 example/css/index.scss |  7 +++++++
 example/index.jsx      |  2 +-
 src/LazyRender.jsx     |  9 +++++++--
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/dist/LazyRender.js b/dist/LazyRender.js
index 4e8d06f..56465ea 100644
--- a/dist/LazyRender.js
+++ b/dist/LazyRender.js
@@ -1,9 +1,10 @@
 "use strict";
 
 var React = require('react/addons');
+var elementSize = require("element-size");
 var cloneWithProps = React.addons.cloneWithProps;
 
-var LazyRender = React.createClass({displayName: 'LazyRender',
+var LazyRender = React.createClass({displayName: "LazyRender",
   propTypes: {
     children: React.PropTypes.array.isRequired,
     maxHeight: React.PropTypes.number.isRequired,
@@ -55,6 +56,11 @@ var LazyRender = React.createClass({displayName: 'LazyRender',
     }
   },
 
+  getElementHeight: function(element) {
+    var marginTop = parseInt(window.getComputedStyle(element).marginTop);
+    return elementSize(element)[1] - marginTop; //remove one margin since the margins are shared by adjacent elements
+  },
+
   componentWillReceiveProps: function(nextProps) {
     var childrenTop = Math.floor(this.state.scrollTop / this.state.childHeight);
     var childrenBottom = (nextProps.children.length - childrenTop -
@@ -87,8 +93,7 @@ var LazyRender = React.createClass({displayName: 'LazyRender',
   componentDidMount: function() {
     var firstChild = this.refs['child-0'];
     var el = firstChild.getDOMNode();
-    var childHeight = (el.style.height ? el.style.height.replace('px', '') :
-                       null) || el.clientHeight;
+    var childHeight = this.getElementHeight(el);
 
     var height = this.getHeight(
       this.props.children.length,
diff --git a/example/css/index.scss b/example/css/index.scss
index d35744d..7e46775 100644
--- a/example/css/index.scss
+++ b/example/css/index.scss
@@ -48,3 +48,10 @@ p.info {
         margin-right: 10px;
     }
 }
+
+.list-item {
+  height: 20px;
+  padding: 5px 10px;
+  background-color: #E3F3FB;
+  margin: 5px 0px;
+}
diff --git a/example/index.jsx b/example/index.jsx
index bc4ff34..4dc73ab 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -87,7 +87,7 @@ var Index = React.createClass({
   render: function() {
     var rows = _.range(this.state.limit).map(function(row) {
       var index = row % 50;
-      return <div style={{ height: 20, padding: "5px 10px" }}>
+      return <div className="list-item">
         #{row + 1} {NAMES[index]}
       </div>;
     });
diff --git a/src/LazyRender.jsx b/src/LazyRender.jsx
index f0b78a7..5a61e0d 100644
--- a/src/LazyRender.jsx
+++ b/src/LazyRender.jsx
@@ -1,6 +1,7 @@
 "use strict";
 
 var React = require('react/addons');
+var elementSize = require("element-size");
 var cloneWithProps = React.addons.cloneWithProps;
 
 var LazyRender = React.createClass({
@@ -55,6 +56,11 @@ var LazyRender = React.createClass({
     }
   },
 
+  getElementHeight: function(element) {
+    var marginTop = parseInt(window.getComputedStyle(element).marginTop);
+    return elementSize(element)[1] - marginTop; //remove one margin since the margins are shared by adjacent elements
+  },
+
   componentWillReceiveProps: function(nextProps) {
     var childrenTop = Math.floor(this.state.scrollTop / this.state.childHeight);
     var childrenBottom = (nextProps.children.length - childrenTop -
@@ -87,8 +93,7 @@ var LazyRender = React.createClass({
   componentDidMount: function() {
     var firstChild = this.refs['child-0'];
     var el = firstChild.getDOMNode();
-    var childHeight = (el.style.height ? el.style.height.replace('px', '') :
-                       null) || el.clientHeight;
+    var childHeight = this.getElementHeight(el);
 
     var height = this.getHeight(
       this.props.children.length,