获取一系列数字供计数器计数

Question

我是 making a site using FreeWall，我在使用 appendBlock 方法向墙上添加新块时遇到了问题。当我添加新块时，我再次得到相同的块。

这是我的代码 (JavaScript):

// Populate grid with initail images.
// This is going to get the first 10 images (1.jpg → 10.jpg)
// and add them to the grid for the initial page setup.
// This is working fine.

var temp = "<div class='fwbrick' style='width:{width}px;'><a href='#' data-reveal-id='modal-{modal}'><img src='http://yamsandwich.com/img/profile/{index}.jpg' width='100%'></a></div>";
var w = 1,
  h = 1,
  html = '',
  limitItem = 10;
for (var i = 0; i < limitItem; ++i) {
  w = 1 + 3 * Math.random() << 0;
  html += temp.replace(/\{width\}/g, w * 150).replace("{modal}", i + 1).replace("{index}", i + 1);
}

// create add more button
$(".add-more").click(function() {
  var temp = "<div class='fwbrick' style='width:{width}px;'><a href='#' data-reveal-id='modal-{modal}'><img src='http://yamsandwich.com/img/profile/{index}.jpg' width='100%'></a></div>";
  var w = 1,
    h = 1,
    html = '',
    limitItem = 10;

  // The problem is right here. 
  // I don’t know how to tell it to find images 11 to 20 or X to Y.
  // Right now, it just repeats the first 10. 
  // Even when I set `i` to `10` to start, I still just get images 1 – 10 over again.

  for (var i = 1; i < limitItem; ++i) {
    w = 1 + 3 * Math.random() << 0;
    html += temp.replace(/\{width\}/g, w * 150).replace("{modal}", i + 1).replace("{index}", i + 1);
  }

  wall.appendBlock(html);

});

// target the div for the wall
$("#freewall").html(html);

// create the walls structure
var wall = new Freewall("#freewall");
wall.reset({
  selector: '.fwbrick',
  animate: true,
  cellW: 150,
  cellH: 'auto',
  onResize: function() {
    wall.fitWidth();
  }
});

// load the images into the wall
var images = wall.container.find('.fwbrick');
images.find('img').load(function() {
  wall.fitWidth();
});

所以我想知道的是，如何在 add-more 函数中获取计数器以获取序列中接下来的 10 个块。

在第一句的 link 或 if you missed that, click here.

处查看实际效果

Answer 1

已更新

我发现 here 一种在创建 html 之前检查图像是否实际存在的方法。将我之前提到的代码替换为：

var initial = 0; //Current image
var increment = 10; //total of images each time someone hits the button (and the initial images on the page)

function imageExists(image_url){
    var http = new XMLHttpRequest();
    http.open('HEAD', image_url, false);
    http.send();
    return http.status != 404;
}

function appendImageBlocks() {
    var temp = "<div class='fwbrick' style='width:{width}px;'><a href='#' data-reveal-id='modal-{modal}'><img src='http://yamsandwich.com/img/profile/{index}.jpg' width='100%'></a></div>";
    var w = 1, h = 1, html = '', limitItem = initial+increment;
    for (var i = initial; i < limitItem; ++i) {
console.log("http://yamsandwich.com/img/profile/"+(i+1)+".jpg");
        if(imageExists("http://yamsandwich.com/img/profile/"+(i+1)+".jpg")) {
            w = 1 + 3 * Math.random() << 0;
            html += temp.replace(/\{width\}/g, w*150).replace("{modal}", i + 1).replace("{index}", i + 1);
            initial++;
        } else {
            console.log("Image "+(i+1)+" not found");
            return "";
        };
    }
    return html;
}

$(".add-more").click(function() {
    html = appendImageBlocks();
    wall.appendBlock(html);
});

html = appendImageBlocks();

// target the div for the wall
//Rest of the code

Answer 2

您希望每次调用 add-more 时都缓存您的索引和 limitItem，以便您知道下次从哪里开始，因此请将它们与其余的全局变量一起声明

var temp = "<div class='fwbrick' style='width:{width}px;'><a href='#' data-reveal-id='modal-{modal}'><img src='http://yamsandwich.com/img/profile/{index}.jpg' width='100%'></a></div>";
var w = 1,
  h = 1,
  html = '',
  limitItem = 11,
  index = 1;

然后在你的 for 循环中不要重新初始化它们，因为你想使用失败的索引的最后一个值作为这次的第一个值。

for ( ; index < limitItem; ++index) {
  w = 1 + 3 * Math.random() << 0;
  html += temp.replace(/\{width\}/g, w * 150).replace("{modal}", index).replace("{index}", index);
}

请注意没有加号，因为索引从 1 开始，而 limitItem 是 11。然后在您的 add-more 函数中，不要将带有关键字 var 的 limitItem 设置为 10，而是将其递增 10。如果您使用 var ，则您正在创建一个不会影响全局变量的函数局部变量。您甚至可以跳过重新声明 w、h 和 html 变量。

html = '';
limitItem+=10; //limit Item is 21 after first call and 31 after second ect...

然后只需在函数内重用相同的 for 循环即可。第一次调用 addmore index 将从 11 开始，limitItem 将为 21，您应该获得 11 到 20 的图像

最好使用一个闭包来封装这一切，并使用返回的函数来预填充和添加更多图像

var addTen = (function(){
  //cached variables
  var index = 1,
      limitItem = 1,
      temp = "<div class='fwbrick' style='width:{width}px;'><a href='#' data-reveal-id='modal-{modal}'><img src='http://yamsandwich.com/img/profile/{index}.jpg' width='100%'></a></div>";
  return function(){
    var html='',
        w=1,
        h=1;
    limitItem+=10;
    for ( ; index < limitItem; ++index) {
      w = 1 + 3 * Math.random() << 0;
      html += temp.replace(/\{width\}/g, w * 150).replace("{modal}", index).replace("{index}", index);
    }
    wall.appendBlock(html);
  }
}());

$(".add-more").click(addTen);

var wall = new Freewall("#freewall");
addTen();

// rest of your code

然而，这确实假设 appendblock 和新的 Freewall 函数在空 div 上工作。

获取一系列数字供计数器计数

Getting a range of numbers for a counter to count

javascript

jquery

counter

freewalljs