简明瀑布流算法

### JS //main.js (function(){ var COLS = 5; var ITEMWIDTH = 236; var GUTTERWIDTH = 15; var columnHeights; var button = document.getElementsByTagName("button")[0]; // Number of columns is 5, and init heights array of columns. function resetHeights(){ columnHeights = []; for (var i = 0; i < COLS; i++) { columnHeights.push(0); } } // main function to load images function loadImages(){ var imageArr = getImages(); var html = ''; for (var i = 0; i < imageArr.length; i++) { var _div = ''; html += _div; } var container = document.getElementsByClassName("container")[0]; container.innerHTML = html; console.log(html); // after images loaded. setTimeout(placeItems, 1000); } // get images source array. function getImages(){ var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; var imageArr = []; var baseUri = 'http://myst729.github.io/Waterfall/img/'; for (var i = 0; i < arr.length; i++) { var img_src = baseUri+arr[i]+'.jpg' ; imageArr.push(img_src); } return imageArr; } // get left of the item function getItemLeft(key){ var left = 0; // COLS left = (key%COLS)*(ITEMWIDTH+GUTTERWIDTH); return left; } // function placeItems(){ resetHeights(); var items = document.getElementsByClassName("item"); for(var index in items){ columnIndex = getMinKey(columnHeights); columnHeight = columnHeights[columnIndex]; items[index].style.left = getItemLeft(columnIndex) + 'px'; items[index].style.top = columnHeight + 'px'; columnHeights[columnIndex] = columnHeight + GUTTERWIDTH + items[index].offsetHeight; console.log(columnHeights); } } // get minimal value index of an array. function getMinKey(arr){ var key = 0; var min = arr[0]; for (var i = 0; i < arr.length; i++) { if(arr[i]