waterfall自适应瀑布流

 查看演示  website  立即下载

temple：（假如{{}}渲染冲突，可以在front.js中，正则里修改成别的字符）

具体自适应：（在全局函数中定义全局变量，可以是固定数值，也可以通过计算获得）

var MIN_COLUMN_COUNT = 2; // minimal column count
var COLUMN_WIDTH = 152.5;   // cell width: 190, padding: 14 * 2, border: 1 * 2
var CELL_PADDING = 26;    // cell padding: 14 + 10, border: 1 * 2
var GAP_HEIGHT = 5;      // vertical gap between cells
var GAP_WIDTH = 5;       // horizontal gap between cells
var THRESHOLD = 2000;     // determines whether a cell is too far away from viewport (px)

渲染方法：

var appendCells = function(num) {
   if(loading) {
     // Avoid sending too many requests to get new cells.
     return;
   }
   var xhrRequest = new XMLHttpRequest();
   var fragment = document.createDocumentFragment();
   var cells = [];
   var images;
   xhrRequest.open('GET', 'json.php?n=' + num, true);
   xhrRequest.onreadystatechange = function() {
     if(xhrRequest.readyState == 4 && xhrRequest.status == 200) {
       images = JSON.parse(xhrRequest.responseText);
       for(var j = 0, k = images.length; j < k; j++) {
         var cell = document.createElement('div');
         cell.className = 'cell pending';
         cell.tagLine = images[j].title;
         cells.push(cell);
         console.log(images[j])
         front(cellTemplate, images[j], cell);
         fragment.appendChild(cell);
       }
       cellsContainer.appendChild(fragment);
       loading = false;
       adjustCells(cells);
     }
   };
   loading = true;
   xhrRequest.send(null);
 };

如果使用appendCells 方法，最后isGithubDemo请改为false：

// If there's space in viewport for a cell, request new cells.
if (viewportBottom > getMinVal(columnHeights)) {
    // Remove the if/else statement in your project, just call the appendCells function.
    if (isGithubDemo) {
        appendCellsDemo(columnCount);
    } else {
        appendCells(columnCount);
    }
}

PREVIOUS:
NEXT:
响应式CSS3 HTML5表单框架
3D标签云滚动插件