jQuery Masonry toggle column width fluid

Programmatically toggle column width option between a pixel value and a function (returning a fraction to be used in a fluid layout). CSS updates accordingly.

by bizamajig

HTML

<script src="//masonry.desandro.com/js/masonry-docs.min.js"></script>
<button>Toggle column width</button>

<div id="container">
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</div>

CSS

body {
    font-family: sans-serif;
}

#container {
    border: 1px solid;
    padding: 5px;
}

.item {
    width: 60px;
    height: 60px;
    float: left;
    margin: 5px;
    background: #CCC;
}

.item.w2 {
    width: 130px;
}

.item.h2 {
    height: 130px;
}

.percentage .item {
  width: 49%;
  margin: 5px 0;
}

JavaScript

var $container = $('#container')
  
    $container.masonry({
        itemSelector: '.item',
        columnWidth: 70
    });

  $('button').click(function(){
      
    var widthFunc = function(containerWidth){
      return containerWidth/2;
    }
    
    var w = ($container.hasClass('percentage') ? 70 : widthFunc )

    $container.toggleClass('percentage')

             
    $container.masonry('option', {
      columnWidth: w
    })
    
   $container.masonry('reload')

  })