waterfall自适应瀑布流

查看演示立即下载

插件描述：使用front封装渲染，cell的宽高间隙定义全局参数自行修改

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);
    }
}

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： 3D标签云滚动插件
下一个特效：响应式CSS3 HTML5表单框架