This time I will share jQuery Plugin and tutorial about Pinterest-Like Dynamic Grid Layout In JavaScript – Wookmark, hope it will help you in programming stack.
| File Size: | 1.03 MB |
|---|---|
| Views Total: | 33090 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Wookmark is a jQuery & Vanilla JavaScript Plugin that lays out a series of elements in a dynamic, filterable, multi-column grid layout just as you’ve seen on Pinterest.com. Also known as Masonry Layout.
You might also like:
- Pinterest Like Glowing Input Fields with CSS3
- Pinterest-Like Dynamic & Responsive Grid Layout Plugin – BlocksIt
- Fluid Asymmetrical Animated Grid Plugin – flex
- Pinterest-Like Web Layout Plugin
- Pinterest Style Dynamic Layout jQuery Plugin – Masonry
More Examples:
Features:
- Responsive design.
- Auto-update the layout when the browser window is resized.
- Endless-scroll support.
- Grid filter support.
- Also works as a Vanilla JavaScript (Wookmark 2.0+).
- Compatible with the imageLoaded library.
Installation:
1 |
# NPM |
2 |
$ npm install wookmark --save |
How to use it:
1. Include jQuery Library (OPTIONAL) and the wookmark.js library in your website:
01 |
<!-- OPTIONAL --> |
02 |
<script src="/path/to/cdn/jquery.min.js"> |
03 |
<!-- OPTIONAL --> |
04 |
<script src="/path/to/cdn/imagesloaded.min.js"> |
05 |
<!-- Minified Version --> |
06 |
<script src="wookmark.min.js"></script> |
07 |
<!-- Or From A CDN --> |
08 |
<script src="https://unpkg.com/wookmark"></script> |
09 |
<!-- Or --> |
10 |
<script src="https://cdn.jsdelivr.net/npm/wookmark/wookmark.min.js"></script> |
2. Add a list of grid items to the layout.
01 |
<ul id="wookmark-example" class="tiles-wrap"> |
02 |
<li> |
03 |
<img src="1.jpg" alt="Image Alt"> |
04 |
<p>Image Description</p> |
05 |
</li> |
06 |
<li> |
07 |
<img src="2.jpg" alt="Image Alt"> |
08 |
<p>Image Description</p> |
09 |
</li> |
10 |
<li> |
11 |
<img src="3.jpg" alt="Image Alt"> |
12 |
<p>Image Description</p> |
13 |
</li> |
14 |
<li> |
15 |
<img src="4.jpg" alt="Image Alt"> |
16 |
<p>Image Description</p> |
17 |
</li> |
18 |
<li> |
19 |
<img src="5.jpg" alt="Image Alt"> |
20 |
<p>Image Description</p> |
21 |
</li> |
22 |
... |
23 |
</ul> |
3. Initialize the Wookmark plugin by calling the function on the HTML list.
01 |
// As A Vanilla JavaScript Plugin |
02 |
window.onload = function () { |
03 |
var myWookmark = new Wookmark('#wookmark-example', { |
04 |
// options here |
05 |
}); |
06 |
}; |
07 |
08 |
// As A jQuery Plugin |
09 |
$(function(){ |
10 |
$('#wookmark-example').wookmark({ |
11 |
// options here |
12 |
}); |
13 |
}); |
4. The example CSS for the layout & grid items.
01 |
/** |
02 |
* Grid container |
03 |
*/ |
04 |
.tiles-wrap { |
05 |
position: relative; /** Needed to ensure items are laid out relative to this container **/ |
06 |
margin: 10px 0; |
07 |
padding: 0; |
08 |
list-style-type: none; |
09 |
display: none; |
10 |
} |
11 |
12 |
13 |
/** |
14 |
* Grid items |
15 |
*/ |
16 |
.tiles-wrap li { |
17 |
display: block; |
18 |
opacity: 0; |
19 |
text-align: center; |
20 |
list-style-type: none; |
21 |
background-color: #fff; |
22 |
float: left; |
23 |
cursor: pointer; |
24 |
width: 200px; |
25 |
padding: 4px; |
26 |
border: 1px solid #dedede; |
27 |
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); |
28 |
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); |
29 |
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); |
30 |
-webkit-border-radius: 2px; |
31 |
-moz-border-radius: 2px; |
32 |
border-radius: 2px; |
33 |
} |
34 |
.tiles-wrap.wookmark-initialised.animated li { |
35 |
-webkit-transition: all 0.3s ease-out; |
36 |
-moz-transition: all 0.3s ease-out; |
