freakingawesome/so-35738808.html

## so-35738808.html
<html>
  <head>
  <style>
    * { box-sizing: border-box; }

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

    body { font-family: sans-serif; }

    /* ---- grid ---- */

    .grid {
        background: #DDD;
    }

    /* clear fix */
    .grid:after {
        content: '';
        display: block;
        clear: both;
    }

    /* ---- .grid-item ---- */

    .grid-sizer,
    .grid-item {
        width: 33.333%;
    }

    .grid-item {
        float: left;
    }

    .grid-item img {
        display: block;
        max-width: 100%;
    }
  </style>
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
    <script src="masonry.pkgd.min.js"></script>
    <script src="Main.js"></script>
    <script>
      var app = Elm.fullscreen(Elm.Main, { setMessage: "" });
      app.ports.masonryCommands.subscribe(function(cmd) {
        var $grid = $('.grid')

        if (cmd === "initialize") {
          $grid.masonry({
            itemSelector: '.grid-item',
            percentPosition: true,
            columnWidth: '.grid-sizer'
          });

          $grid.imagesLoaded().progress( function() {
            $grid.masonry();
          });

          $grid.on("layoutComplete", function() {
            app.ports.setMessage.send("Masonry layout complete!");
          });
        } else if (cmd === "imageRemoved") {
          $grid.masonry();
        }
      });
    </script>
  </body>
</html>
	<html>
	<head>
	<style>
	* { box-sizing: border-box; }

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

	body { font-family: sans-serif; }

	/* ---- grid ---- */

	.grid {
	background: #DDD;
	}

	/* clear fix */
	.grid:after {
	content: '';
	display: block;
	clear: both;
	}

	/* ---- .grid-item ---- */

	.grid-sizer,
	.grid-item {
	width: 33.333%;
	}

	.grid-item {
	float: left;
	}

	.grid-item img {
	display: block;
	max-width: 100%;
	}
	</style>
	</head>
	<body>
	<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
	<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
	<script src="masonry.pkgd.min.js"></script>
	<script src="Main.js"></script>
	<script>
	var app = Elm.fullscreen(Elm.Main, { setMessage: "" });
	app.ports.masonryCommands.subscribe(function(cmd) {
	var $grid = $('.grid')

	if (cmd === "initialize") {
	$grid.masonry({
	itemSelector: '.grid-item',
	percentPosition: true,
	columnWidth: '.grid-sizer'
	});

	$grid.imagesLoaded().progress( function() {
	$grid.masonry();
	});

	$grid.on("layoutComplete", function() {
	app.ports.setMessage.send("Masonry layout complete!");
	});
	} else if (cmd === "imageRemoved") {
	$grid.masonry();
	}
	});
	</script>
	</body>
	</html>