add the cache option for kombai#47

linhyo · May 2, 2014 · c4d79c2 · c4d79c2
1 parent 17edfea
commit c4d79c2
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 0 deletions.
diff --git a/example/live-size.html b/example/live-size.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Live block's size</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type">
+    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
+    <script type="text/javascript" src="../freewall.js"></script>
+    <style type="text/css">
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        article {
+            float: left;
+            overflow: hidden
+        }
+        img {
+            display: block;
+            width: 100%;
+            height: auto;
+        }
+        .for6col article {
+            width: 16.66%;
+        }
+        .for4col article {
+            width: 25%;
+        }
+        .for2col article {
+            width: 50%
+        }
+    </style>
+    <script type="text/javascript">
+
+        $(document).ready(function () {
+
+            var gutter = 20;
+
+            function cellSize(containerWidth) {
+                if (containerWidth > 1024) {
+                    var colNum = 6;
+                } else if (containerWidth > 768) {
+                    var colNum = 4;
+                } else {
+                    var colNum = 2;
+                }
+
+                return (containerWidth / colNum) - gutter;
+            }
+
+
+            var wall = new freewall("#freewall");
+            wall.reset({
+                selector: 'article',
+                animate: true,
+                cellW: cellSize,
+                cellH: 'auto',
+
+                cache: false, // don't cache block size;
+
+                gutterX: gutter,
+                gutterY: gutter,
+                onResize: function (container) {
+                    var containerWidth = container.width();
+
+                    if (containerWidth > 1024) {
+                        container.attr("class", "for6col");
+                    } else if (containerWidth > 768) {
+                        container.attr("class", "for4col");
+                    } else {
+                        container.attr("class", "for2col");
+                    }
+
+                    wall.fitWidth();
+
+                    document.title = containerWidth;
+                }
+            });
+
+            wall.fitWidth();
+
+            wall.container.find('.block img').load(function () {
+                $(window).trigger("resize");
+            });
+
+
+        });
+    </script>
+</head>
+
+<body>
+    <div id="freewall">
+        <article>
+            <div class="block">
+                <div class="entry-content">
+                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
+                </div>
+            </div>
+        </article>
+        <article>
+            <div class="block">
+                <div class="entry-content">
+                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
+                </div>
+            </div>
+        </article>
+        <article>
+            <div class="block">
+                <div class="entry-content">
+                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
+                </div>
+            </div>
+        </article>
+        <article>
+            <div class="block">
+                <div class="entry-content">
+                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
+                </div>
+            </div>
+        </article>
+        <article>
+            <div class="block">
+                <div class="entry-content">
+                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
+                </div>
+            </div>
+        </article>
+        <article>
+            <div class="block">
+                <div class="entry-content">
+                    <img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
+                </div>
+            </div>
+        </article>
+    </div>
+</body>
+
+</html>
diff --git a/freewall.js b/freewall.js
@@ -19,6 +19,7 @@
         // default setting;
         defaultConfig: {
             animate: false,
+            cache: true, // cache the size of blocks for performance;
             cellW: 100, // function(container) {return 100;}
             cellH: 100, // function(container) {return 100;}
             delay: 0, // slowdown active block;
@@ -61,10 +62,20 @@
             }
 
             // store original size;
+
             $item.attr('data-height') == null && $item.attr('data-height', $item.height());
             $item.attr('data-width') == null && $item.attr('data-width', $item.width());
             var height = 1 * $item.attr('data-height');
             var width = 1 * $item.attr('data-width');
+
+            if (!setting.cache) {
+                item.style.width = "";
+                width = $item.width();
+
+                item.style.height = "";
+                height = $item.height();
+            }
+
             var fixPos = $item.attr('data-position');
 
             var cellH = runtime.cellH;

diff --git a/index.html b/index.html
@@ -208,6 +208,7 @@ <h2>Options</h2>
 						<ul>
 							<li> draggable </li>
 							<li> animate </li>
+							<li> cache </li>
 							<li> cellW </li>
 							<li> cellH </li> 
 							<li> delay </li>
@@ -236,6 +237,12 @@ <h3> draggable : boolean </h3>
 								<h3> animate : boolean </h3>
 								<div> True: to make block move with animation</div>
 							</li>
+							<li>
+								<h3> cache : boolean </h3>
+								<div> 
+									Default: true <br/>
+									True: will cache the with and height of block for next time</div>
+							</li>
 							<li>
 								<h3> cellW: mix </h3>
 								<div>