ListRenderer.js

var homepage = {
    config: {
        content: {
            margin_left: 28,
            margin_right: 275,
            stage: "content",
            item_width: 135,
            item_vgap: 5,
            item_hgap: 5,
            item_y: 0,
            offset_y: 170
        }
    }
};

/**
 * Interesting grid renderer. It's slightly different from 
 * a tile list grid - The layout is based on a variable height.
 * Anthony Cintron - anthony.cintron@gmail.com
 */
function ListRenderer() {
    return {
      data: [],
      total_columns: 0,
      list_type: "date",
      rendered_list: new Array(),
      getFilteredList: function(filterType) {
          this.onFilteredListLoaded({
              data: list_data
          });
      },
      onFilteredListLoaded: function(evt) {
          var data = evt.data.slice(0);
          this.renderList(data);
      },
      removeElements: function(node) {
          while (node.hasChildNodes()) {
              node.removeChild(node.lastChild);
          }
      },
      onItemClick: function(evt) {      
      },
      onItemRollOver: function(evt) {
        // dispatch custom rollover event.
      },
      renderList: function(value) {
          var list = value;
          var stage = document.getElementById(homepage.config.content.stage);
          var browser_width = window.innerWidth - homepage.config.content.margin_right;
          var num_of_cols = Math.ceil(browser_width / homepage.config.content.item_width);
          var remainder = browser_width % homepage.config.content.item_width;
          var is_remainder = (remainder > 0) ? true: false;
          var num_of_rows = Math.ceil(list.length / num_of_cols);
          var rendered_imgs = [];

          if (this.total_columns === num_of_cols)
          return;

          this.total_columns = num_of_cols;
          // clear
          this.removeElements(document.getElementById(homepage.config.content.stage));
          
          var evt = document.createEvent("Event");
          evt.initEvent("renderupdated", true, true);
          evt.data = {
            width: (num_of_cols*homepage.config.content.item_width)+homepage.config.content.margin_left
          };
          window.dispatchEvent(evt);
          
          var action = {
              filtered_list: [],
              create_rendered_list: function(clen, rlen) {
                  var tmp_list = list.slice(0);
                  for (var r = 0; r < rlen; r++) {
                      this.rendered_list.push(list.splice(0, clen));
                  }
              },
              render: function(rendered_list) {
                  var that = this;
                  var len = rendered_list.length;
                  var start_offset_x = homepage.config.content.margin_left;
                  var old_x = start_offset_x;

                  for (var r = 0; r < len; r++) {
                      // loop through rows
                      var cols = new Array();
                      for (var c = 0; c < rendered_list[r].length; c++) {
                          // loop through each column
                          var img = new Image();
                          img.id = "item_"+r+"_"+c;
                          img.style.top = homepage.config.content.item_y + "px";
                          img.onclick = function(evt){
                          };
                          
                          img.onmouseover = function(evt){
                            // Create custom event
                            var evt = document.createEvent("Event");
                            evt.initEvent("onrollover", true, true );
                            evt.data = {
                              id: this.id,
                              position: {
                                x: parseInt(this.style.left),
                                y: parseInt(this.style.top)
                              },
                              width: parseInt(this.width),
                              height: parseInt(this.height),
                              src: this.src
                            };
                            window.dispatchEvent(evt);
                          };
                          
                          img.onload = function(value) {
                              return function() {
                                  // setup
                                  var new_x = start_offset_x;
                                  value.image.style.position = "absolute";

                                  //horizontal position
                                  if (value.cindex > 0) {
                                      old_x += (homepage.config.content.item_width + homepage.config.content.item_hgap);
                                      new_x = old_x;
                                  } else {
                                      old_x = start_offset_x;
                                  }

                                  // vertical position
                                  if (value.rindex > 0) {
                                      var offset = homepage.config.content.offset_y + homepage.config.content.item_vgap;
                                      var prev_item = rendered_imgs[value.rindex - 1][value.cindex];
                                      if (value.rindex > 1) {
                                          offset = parseInt(prev_item.style.top) + homepage.config.content.item_vgap;
                                      }
                                      value.image.style.top = (offset + prev_item.height) + "px";
                                  } else {
                                      value.image.style.top = homepage.config.content.offset_y + "px";
                                  }

                                  value.image.style.left = new_x + "px";
                                  stage.appendChild(value.image);
                                  cols.push(value.image);

                                  if ((cols.length) == rendered_list[value.rindex].length) {
                                      // push to rendered images
                                      rendered_imgs.push(cols);
                                      cols = [];
                                  }
                              }
                              // end return
                          } ({
                              image: img,
                              rindex: r,
                              cindex: c
                          });
                          img.src = rendered_list[r][c].imageURL;
                      }
                      // end for
                  }
                  // end for
              }
          }

          action.create_rendered_list.call(this, num_of_cols, num_of_rows);
          action.render.call(this, this.rendered_list);

      }
   }
}