Question

我making a site使用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个块。

请参阅第一句中的链接或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函数中，不要将limitItem设置为关键字var为10，而是将其递增10。如果使用var，则创建一个不会影响全局变量的函数本地变量。你甚至可以跳过重新声明w，h和html vars。

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上工作。

获取计数器的一系列数字

2 个答案: