pinboard.js

A17.Behaviors.pinboard = function(container){

  var colCount = container.getAttribute("data-col-count");
  var colWidth = 0;
  var margin = 0;
  var windowWidth = 0;
  var cols;

  function setupBlocks() {
    margin = (A17.media_query_in_use === "large") ? 40 : 30;
    windowWidth = window.innerWidth;
    cols = [];
    for (var i = 0; i < colCount; i++) {
      cols.push(0);
    }
  }

  function positionBlocks() {
    if ($('.pinboard__block').length === 0) {
      return;
    }
    colWidth = parseInt($('.pinboard__block').css('width').replace(/(px)/,""));
    //
    $('.pinboard__block:not(.pinboard__block--positioned)',container).each(function(block) {
      var $block = $(block);
      // reset the blocks height
      block.style.height = "auto";
      // work out which col to drop into
      var min = minOfArray(cols);
      var index = cols.indexOf(min);
      var leftPos = index * (colWidth + margin);
      // calc any image heights
      var img = this.querySelectorAll('img')[0];
      if (img && !$block.hasClass("list-selections__item") && !$block.hasClass("list-inspiration-collections__item")) {
        img.style.height = "auto";
        img.style.height = Math.floor(parseInt(img.getAttribute("height")) * (colWidth / img.getAttribute("width"))) + "px";
      }
      // now get blocks new height
      var newHeight = block.offsetHeight;
      // now update position
      $(block).css({
        left: leftPos+'px',
        top: min+'px',
        height: newHeight + 'px'
      }).addClass("pinboard__block--positioned");
      // update col
      cols[index] = min + newHeight + margin;
      // update container height
      container.style.height = maxOfArray(cols) + 'px';
    });
  }

  function minOfArray(array) {
    return Math.min.apply(Math, array);
  }

  function maxOfArray(array) {
    return Math.max.apply(Math, array);
  }

  $(document).on("content_populated", function(){
    positionBlocks();
  });

  $(document).on("media_query_updated", function(){
    if (A17.media_query_in_use !== "small") {
      $('.pinboard__block',container).removeClass("pinboard__block--positioned").attr("style","");
      setupBlocks();
      positionBlocks();
    } else {
      container.setAttribute("style","");
      $('.pinboard__block',container).removeClass("pinboard__block--positioned").attr("style","");
      $('.pinboard__block img',container).attr("style","");
    }
  });

  if (A17.media_query_in_use !== "small") {
    setupBlocks();
    positionBlocks();
  }

};