Added example with unknown image dimensions

Per popular request, the added example shows how to use the Wookmark
plugin when you don't know the dimensions of the images. Paul Irish's
imagesLoaded plugin is used to wait until all images are loaded, before
triggering the grid layout update.

README.md

@@ -4,8 +4,9 @@ jQuery Wookmark
 This is a [jQuery](http://www.jquery.com) plugin for laying out a dynamic grid of elements.
 
 See the [documentation page](http://www.wookmark.com/jquery-plugin) for examples.
-The repository also includes a working example. All images used in the example are copyrighted 
-by their respective owners and only included for showcasing plugin functionality..
+
+The repository also includes two functional examples. All images used in the example are copyrighted 
+by their respective owners and only included for showcasing plugin functionality.
 
 
 Installation
@@ -42,6 +43,20 @@ Where `myElement` is the class of the items you want to lay out in a grid.
 
 See the [documentation page](http://www.wookmark.com/jquery-plugin) for details on available options.
 
+Included examples
+-----------------
+
+/example
+Is the preferred setup. In this scenario the width and height of all images is set in the HTML img attributes. 
+The grid layout can be performed as soon as the document is rendered, BEFORE images are loaded.
+
+/example-load-images
+In this example, the width and height of the images is not known. Via Paul Irish's imagesLoaded plugin (slightly
+modified by desandro). The grid layout is performed after all images are loaded and their dimensions can be
+retrieved. This approach is much slower. The imagesLoaded plugin can also be found on github right here:
+https://gist.github.com/797120
+
+
 Feedback
 --------
 

example-load-images/css/reset.css

@@ -0,0 +1,124 @@
+/* HTML5 ✰ Boilerplate
+ * ==|== normalize ==========================================================
+ */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+body { margin: 0; font-size: 13px; line-height: 1.231; }
+body, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+a:hover, a:active { outline: 0; }
+
+abbr[title] { border-bottom: 1px dotted; }
+b, strong { font-weight: bold; }
+blockquote { margin: 1em 40px; }
+dfn { font-style: italic; }
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+ins { background: #ff9; color: #000; text-decoration: none; }
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+small { font-size: 85%; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+svg:not(:root) { overflow: hidden; }
+figure { margin: 0; }
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+label { cursor: pointer; }
+legend { border: 0; *margin-left: -7px; padding: 0; }
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+button, input { line-height: normal; *overflow: visible; }
+table button, table input { *overflow: auto; }
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+
+/* ==|== primary styles =====================================================
+   Author: 
+   ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ==|== non-semantic helper classes ======================================== */
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.ir br { display: none; }
+.hidden { display: none !important; visibility: hidden; }
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+.invisible { visibility: hidden; }
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+
+/* ==|== media queries ====================================================== */
+
+@media only screen and (min-width: 480px) {
+
+
+}
+
+@media only screen and (min-width: 768px) {
+
+}
+
+
+
+/* ==|== print styles ======================================================= */
+
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; }
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}

example-load-images/css/style.css

@@ -0,0 +1,76 @@
+
+/**
+ * Grid container
+ */
+#tiles {
+list-style-type: none;
+position: relative; /** Needed to ensure items are laid out relative to this container **/
+margin: 0;
+}
+
+/**
+ * Grid items
+ */
+#tiles li {
+width: 200px;
+background-color: #ffffff;
+border: 1px solid #dedede;
+-moz-border-radius: 2px;
+-webkit-border-radius: 2px;
+border-radius: 2px;
+display: none; /** Hide items initially to avoid a flicker effect **/
+  cursor: pointer;
+padding: 4px;
+}
+
+#tiles li img {
+display: block;
+}
+
+/**
+ * Grid item text
+ */
+#tiles li p {
+color: #666;
+font-size: 12px;
+margin: 7px 0 0 7px;
+}
+
+/**
+ * Some extra styles to randomize heights of grid items.
+ */
+#tiles ali:nth-child(3n) {
+height: 175px;
+}
+
+#tiles ali:nth-child(4n-3) {
+padding-bottom: 30px;
+}
+
+#tiles ali:nth-child(5n) {
+height: 250px;
+}
+
+/** General page styling **/
+
+html {
+background-color: #e9e9e9;
+}
+
+#main {
+padding: 30px 0 30px 0;
+}
+
+header h1 {
+text-align: center;
+font-size: 24px;
+font-weight: normal;
+margin: 30px 0 3px 0;
+}
+
+header p {
+text-align: center;
+font-size: 13px;
+color: #777;
+margin: 0;
+}

example-load-images/index.html

@@ -0,0 +1,113 @@
+<!doctype html>
+<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+  <title>jQuery Wookmark Plug-in Example</title>
+  <meta name="description" content="An very basic example of how to use the Wookmark jQuery plug-in.">
+  <meta name="author" content="Christoph Ono">
+
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+
+  <!-- CSS Reset -->
+  <link rel="stylesheet" href="css/reset.css">
+
+  <!-- Styling for your grid blocks -->
+  <link rel="stylesheet" href="css/style.css">
+
+</head>
+
+<body>
+
+  <div id="container">
+    <header>
+      <h1>jQuery Wookmark Plug-in Example</h1>
+      <p>Resize the browser window or click a grid item to trigger layout updates.</p>
+    </header>
+    <div id="main" role="main">
+
+      <ul id="tiles">
+        <!-- These are our grid blocks -->
+        <li><img src="images/image_1.jpg"><p>1</p></li>
+        <li><img src="images/image_2.jpg"><p>2</p></li>
+        <li><img src="images/image_3.jpg"><p>3</p></li>
+        <li><img src="images/image_4.jpg"><p>4</p></li>
+        <li><img src="images/image_5.jpg"><p>5</p></li>
+        <li><img src="images/image_6.jpg"><p>6</p></li>
+        <li><img src="images/image_7.jpg"><p>7</p></li>
+        <li><img src="images/image_8.jpg"><p>8</p></li>
+        <li><img src="images/image_9.jpg"><p>9</p></li>
+        <li><img src="images/image_10.jpg"><p>10</p></li>
+        <li><img src="images/image_1.jpg"><p>11</p></li>
+        <li><img src="images/image_2.jpg"><p>12</p></li>
+        <li><img src="images/image_3.jpg"><p>13</p></li>
+        <li><img src="images/image_4.jpg"><p>14</p></li>
+        <li><img src="images/image_5.jpg"><p>15</p></li>
+        <li><img src="images/image_6.jpg"><p>16</p></li>
+        <li><img src="images/image_7.jpg"><p>17</p></li>
+        <li><img src="images/image_8.jpg"><p>18</p></li>
+        <li><img src="images/image_9.jpg"><p>19</p></li>
+        <li><img src="images/image_10.jpg"><p>20</p></li>
+        <li><img src="images/image_1.jpg"><p>21</p></li>
+        <li><img src="images/image_2.jpg"><p>22</p></li>
+        <li><img src="images/image_3.jpg"><p>23</p></li>
+        <li><img src="images/image_4.jpg"><p>24</p></li>
+        <li><img src="images/image_5.jpg"><p>25</p></li>
+        <li><img src="images/image_6.jpg"><p>26</p></li>
+        <li><img src="images/image_7.jpg"><p>27</p></li>
+        <li><img src="images/image_8.jpg"><p>28</p></li>
+        <li><img src="images/image_9.jpg"><p>29</p></li>
+        <li><img src="images/image_10.jpg"><p>30</p></li>
+        <!-- End of grid blocks -->
+      </ul>
+
+    </div>
+    <footer>
+
+    </footer>
+  </div>
+
+  <!-- include jQuery -->
+  <script src="js/jquery-1.7.1.min.js"></script>
+
+  <!-- Include the imagesLoaded plug-in -->
+  <script src="js/jquery.imagesloaded.js"></script>
+
+  <!-- Include the plug-in -->
+  <script src="js/jquery.wookmark.js"></script>
+
+  <!-- Once the images are loaded, initalize the Wookmark plug-in. -->
+  <script type="text/javascript">
+    $('#tiles').imagesLoaded(function() {
+      // Prepare layout options.
+      var options = {
+        autoResize: true, // This will auto-update the layout when the browser window is resized.
+        container: $('#main'), // Optional, used for some extra CSS styling
+        offset: 2, // Optional, the distance between grid items
+        itemWidth: 210 // Optional, the width of a grid item
+      };
+
+      // Get a reference to your grid items.
+      var handler = $('#tiles li');
+
+      // Call the layout function.
+      handler.wookmark(options);
+
+      // Capture clicks on grid items.
+      handler.click(function(){
+        // Randomize the height of the clicked item.
+        var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
+        $(this).css('height', newHeight+'px');
+
+        // Update the layout.
+        handler.wookmark();
+      });
+    });
+  </script>
+
+</body>
+</html>