waterfall实现自适应瀑布流插件

waterfall实现自适应瀑布流插件

使用front封装渲染,cell的宽高间隙定义全局参数自行修改,temple:(假如{{}}渲染冲突,可以在front.js中,正则里修改成别的字符),具体自适应:(在全局函数中定义全局变量,可以是固定数值,也可以通过计算获得)。

使用方法
在页面引入JS代码文件

1
2
<script src="front.js/front.min.js"></script>
<script src="script.js"></script>

渲染方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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:

1
2
3
4
5
6
7
8
9
// 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);
    }
}
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论