头像

it素材网waterfall自适应瀑布流

2019-11-12 09:41:43 收藏 来源:it素材网   浏览(312)   评论 ( 0 )   

it素材网waterfall自适应瀑布流
temple:(假如{{}}渲染冲突,可以在front.js中,正则里修改成别的字符)具体自适应:(在全局函数中定义全局变量,可以是固定数值,也可以通过计算获得)var MIN_COLUMN_COUNT = 2
查看演示 下载资源:5 下载资源 下载积分:60

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


标签: waterfall瀑布流
声明:转载请注明来源(it素材网)并保留原文链接:https://www.itsucai.com/js/173.html
评论0

后面还有条评论,点击查看>>

系统已开启自动识别垃圾评论机制,识别到的自动封号!!!