flexible option: resize columns to fill container

germanysbestkeptsecret · Apr 12, 2013 · 23f97dc · 23f97dc
1 parent 89f6e1a
commit 23f97dc
Show file tree

Hide file tree

Showing 13 changed files with 186 additions and 0 deletions.
diff --git a/example-flexible/css/style.css b/example-flexible/css/style.css
@@ -0,0 +1,66 @@
+
+/**
+ * Grid container
+ */
+#tiles {
+list-style-type: none;
+position: relative; /** Needed to ensure items are laid out relative to this container **/
+margin: 0 5px;
+padding: 0;
+}
+
+/**
+ * Grid items
+ */
+#tiles li {
+width: 210px;
+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;
+-moz-box-sizing:border-box;
+box-sizing:border-box;
+}
+
+#tiles li img {
+display: block;
+width: 100%;
+height: auto;
+}
+
+/**
+ * Grid item text
+ */
+#tiles li p {
+color: #666;
+font-size: 12px;
+margin: 7px 0 0 7px;
+}
+
+/** General page styling **/
+
+html {
+background-color: #e9e9e9;
+}
+
+#main {
+padding: 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;
+}
diff --git a/example-flexible/images/image_1.jpg b/example-flexible/images/image_1.jpg
diff --git a/example-flexible/images/image_10.jpg b/example-flexible/images/image_10.jpg
diff --git a/example-flexible/images/image_2.jpg b/example-flexible/images/image_2.jpg
diff --git a/example-flexible/images/image_3.jpg b/example-flexible/images/image_3.jpg
diff --git a/example-flexible/images/image_4.jpg b/example-flexible/images/image_4.jpg
diff --git a/example-flexible/images/image_5.jpg b/example-flexible/images/image_5.jpg
diff --git a/example-flexible/images/image_6.jpg b/example-flexible/images/image_6.jpg
diff --git a/example-flexible/images/image_7.jpg b/example-flexible/images/image_7.jpg
diff --git a/example-flexible/images/image_8.jpg b/example-flexible/images/image_8.jpg
diff --git a/example-flexible/images/image_9.jpg b/example-flexible/images/image_9.jpg
diff --git a/example-flexible/index.html b/example-flexible/index.html
@@ -0,0 +1,103 @@
+<!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>Flexible: columns resize to fill the container without exceeding a maximum width.</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="../libs/jquery-1.9.1.min.js"></script>
+
+  <!-- Include the imagesLoaded plug-in -->
+  <script src="../libs/jquery.imagesloaded.js"></script>
+
+  <!-- Include the plug-in -->
+  <script src="../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: $('#tiles'), // Optional, used for some extra CSS styling
+        offset: 5, // Optional, the distance between grid items
+        flexibleWidth: 310 // Optional, the maximum width of a grid item
+      };
+
+      // Get a reference to your grid items.
+      var handler = $('#tiles li');
+
+      // Call the layout function.
+      handler.wookmark(options);
+    });
+  </script>
+
+</body>
+</html>
diff --git a/jquery.wookmark.js b/jquery.wookmark.js
@@ -26,6 +26,7 @@
     offset: 2,
     autoResize: false,
     itemWidth: 0,
+    flexibleWidth: 0,
     resizeDelay: 50
   };
 
@@ -73,13 +74,29 @@
       return this.itemWidth === undefined || this.itemWidth === 0 ? this.handler.eq(0).outerWidth() : this.itemWidth;
     };
 
+    // Method to get the flexible item width
+    Wookmark.prototype.getFlexibleWidth = function() {
+      var containerWidth = this.container.width(), columns = 1, columnWidth = containerWidth;
+      for (; columnWidth > this.flexibleWidth; columns++) {
+          columnWidth = (containerWidth - (columns - 1) * this.offset)/(columns);
+      }
+      return Math.floor(columnWidth);
+    };
+
     // Main layout methdd.
     Wookmark.prototype.layout = function() {
       // Do nothing if container isn't visible
       if(!this.container.is(":visible")) {
         return;
       }
 
+      // Calculate flexible item width if option is set
+      if (this.flexibleWidth) {
+        this.itemWidth = this.getFlexibleWidth();
+        // Stretch items to fill calculated width
+        this.handler.css('width', this.itemWidth + 'px');
+      }
+
       // Calculate basic layout parameters.
       var columnWidth = this.getItemWidth() + this.offset,
           containerWidth = this.container.width(),