Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

flexible option: resize columns to fill container

  • Loading branch information...
commit 23f97dcadd4a4e7f2c095071637faaea4663858f 1 parent 89f6e1a
bicouy0 bicouy0 authored
66 example-flexible/css/style.css
View
@@ -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;
+}
BIN  example-flexible/images/image_1.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example-flexible/images/image_10.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example-flexible/images/image_2.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example-flexible/images/image_3.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example-flexible/images/image_4.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example-flexible/images/image_5.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example-flexible/images/image_6.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example-flexible/images/image_7.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example-flexible/images/image_8.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example-flexible/images/image_9.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
103 example-flexible/index.html
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>
17 jquery.wookmark.js
View
@@ -26,6 +26,7 @@
offset: 2,
autoResize: false,
itemWidth: 0,
+ flexibleWidth: 0,
resizeDelay: 50
};
@@ -73,6 +74,15 @@
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
@@ -80,6 +90,13 @@
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(),
Please sign in to comment.
Something went wrong with that request. Please try again.