Masonry test

by sambaldwin

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">

    <div class="item">
        <img src="http://placehold.it/900x600/999/999" />
    </div>

    <div class="item">
        <img src="http://placehold.it/1200x600/999/999" />
    </div>

    <div class="item">
        <img src="http://placehold.it/900x900/999/999" />
    </div>

    <div class="item">
        <img src="http://placehold.it/900x400/999/999" />
    </div>

    <div class="item">
        <img src="http://placehold.it/900x600/999/999" />
    </div>

    <div class="item">
        <img src="http://placehold.it/600x600/999/999" />
    </div>
    
</div>

CSS

#container {
    width:100%;
}

.item {
    float:left;
    width:33.333%;
    padding:10px;
    background:yellow;
}

.item img{
    max-width:100%;
}

JavaScript

$(window).load ( function () {
	//	$('.row.masonry').masonry({
	//	itemSelector: '.row.masonry .large-4',
	//	// set columnWidth a fraction of the container width
	//	columnWidth: function( containerWidth ) {
	//		return containerWidth / 3;
	//		}
	//	});

	// SB - Look into php getimagesize (http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin)

	var $container = $('#container')
	// initialize Isotope
	$container.isotope({
	  // options...
	  resizable: false, // disable normal resizing
	  // set columnWidth to a percentage of container width
	  masonry: { columnWidth: $container.width() / 3 }
	});
	
	// update columnWidth on window resize
	$(window).smartresize(function(){
	  $container.isotope({
	    // update columnWidth to a percentage of container width
	    masonry: { columnWidth: $container.width() / 3 }
	  });
	});
	
	
	var columns;

	// set column number
	setColumns();
	
	// rerun function when window is resized 
	$(window).on('resize', function() {
	  setColumns();
	});
	
	// the function to decide the number of columns
	function setColumns() {
	  if($(window).width() <= 768) {
	    columns = 2;
	  } else {
	    columns = 3;
	  }
	};
	});