Permalink
Browse files

flexible option: resize columns to fill container

  • Loading branch information...
1 parent 89f6e1a commit 23f97dcadd4a4e7f2c095071637faaea4663858f @bicouy0 bicouy0 committed Apr 12, 2013
@@ -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;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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>
View
@@ -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(),

0 comments on commit 23f97dc

Please sign in to comment.