A Pen by Evan.

index.html

<h1>Isotope - columnWidth function</h1>
<div class="masonry">
  <div class="item w2 h2"></div>
  <div class="item w3 h2"></div>
  <div class="item"></div>

  <div class="item"></div>
</div>

Isotope---columnWidth-function.markdown

Isotope - columnWidth function

#661

Forked from David DeSandro's Pen Isotope - columnWidth function.

Forked from Anonasaurus Rex's Pen Isotope - columnWidth function.

A Pen by Evan on CodePen.

License.

script.js

        
  var container = document.querySelector(".masonry");
    window.msnry = new Masonry( container, {
      columnWidth: 0,
      itemSelector: ".item",
      gutterWidth: 0,
      isFitWidth: false,
      isAnimated: true
    });

style.css

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* force scrollbar */
html { overflow-y: scroll; }

body { font-family: sans-serif; }

.masonry {
  background: #EEE;
  margin: 0 auto;
  padding: 0;
  width: 1000px !important;
  
}

.item {
  width: 1000px;
  height: 500px;
  float: left;
  background: #D26;
  margin: 5px;
  padding: 5px;
}

.item.w2 { width:  320px; }

.item.w3 { width:  653px; }

.item.h2 { height: 100px; }
.item.h3 { height: 130px; }
.item.h4 { height: 180px; }