Wookmark Js Grid The Easy Way

install
- bootstrap.css
- jquery.js
- imagesloaded.pkgd.js
- wookmark.js

1- html

<ul class="tiles-wrap">
  <li class="tiles col-xs-12 col-md-3">
  ...
  </li>
</ul>

2- js

function wook() {
  $('.tiles-wrap').imagesLoaded(function() {
    $('.tiles-wrap').wookmark({
      align: 'left',
      autoResize: true,
      container: $('body'),
      itemWidth: 0,
      offset: 0,
      verticalOffset: 20,
      resizeDelay: 50
    });
  });
}

$(window).load(function() {
  wook();
});

$(document).ready(function() {
  wook();
});

$(window).resize(function() {
  wook();
});

3- css

.tiles-wrap {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  position: relative;
  -webkit-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
}
.tiles {
  margin-bottom: 10px;
  list-style-type: none;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s