packery

gistfile1.txt

	Foundation.utils.image_loaded($('.half-left .blocks img'), function(){
		$halfLeftBlocks.packery({
			columnWidth: '.half-left .block-sizer',
			itemSelector: '.block',
			"isOriginLeft": false
		});
	});

here is the scss:

$b-width: 11.5%;
$b-col: 1%;
$left-viewport-margin: 2%;

.block-sizer { width: ($b-width * 1) + ($b-col * 1); margin-bottom: $b-col; }

.blocks { max-width: none!important; width: 100%!important; }
.block {  width: ($b-width * 1); margin-bottom: $b-col; }
.block.w2 { width: ($b-width * 4) + ($b-col * 3); }
.block.w3 { width: ($b-width * 4) + ($b-col * 3); }
.block.w4 { width: ($b-width * 8) + ($b-col * 7); }
.block.w5 { width: ($b-width * 8) + ($b-col * 7); }
.block.w6 { width: ($b-width * 8) + ($b-col * 7); }

@media #{$large-up} {
    .block.w2 { width: ($b-width * 2) + ($b-col * 1); }
    .block.w3 { width: ($b-width * 3) + ($b-col * 2); }
    .block.w4 { width: ($b-width * 4) + ($b-col * 3); }
    .block.w5 { width: ($b-width * 5) + ($b-col * 4); }
    .block.w6 { width: ($b-width * 6) + ($b-col * 5); }
}

                    .blocks
                        .block-sizer
                        .block.w4: img(src="img/06.jpg")
                        .block.w3: img(src="img/08.jpg")
                        .block.w4: img(src="img/07.jpg")
                        .block.w4: img(src="img/20.jpg")
                        .block.w2: img(src="img/76.jpg")
                        .block.w2: img(src="img/77.jpg")