masonry demo

This uses masonry layout but unfortunately flawed to solve our requirement.

by Ben Clayton

HTML

<script src="//dev-orangina-flow.lrsdedicated.com/script/masonry-layout-4.1.1.js"></script>
<div class="stream">
  <div class="block-link size1">
    1 - ONE
  </div>
  <div class="block-link size2">
    2 - TWO
  </div>
  <div class="block-link size1">
    3 - ONE
  </div>
  <div class="block-link size1">
    4 - ONE
  </div>
  <div class="block-link size2">
    5 - TWO
  </div>
  <div class="block-link size1">
    6 - ONE
  </div>
</div>
AFTER

CSS

.stream {
  width: 220px;
  border: green 1px solid;
}

.stream:after {
  content: '';
  display: block;
  clear: both;
}

.size1,
.size2 {
  height: 100px;
  border: red 1px solid;
  margin: 0px;
  float: left;
}

.size1 {
  width: 100px;
}

.size2 {
  width: 200px;
}

JavaScript

$('.stream').masonry({
  // options
  itemSelector: '.block-link',
  /* Or .content-stream-article-wrapper to use locally*/
  columnWidth: 104,
  originLeft: true,
  gutter: 5

});