Question

我有一个js文件执行ajax帖子并从URL获取图像图像被添加到500x500（px）div 我想为我从ajax帖子中取回的每张图片设置不同的尺寸...
我想要使用6种不同的图像尺寸所以我想要实现的是让图片编号1,7,13具有相同的尺寸
图2,8,14具有相同的大小......等等。

$.post(URL, function (data) { 
     var container = $("#container");
     container.html("");

      $.each(data, function () {
          var thumb = $("<div>");
          var image = $("<img>").attr("src", this.ImageUrl);
          var title = $("<span>").html(this.Title);

          thumb.append(title);
          // each picture will be faded in after 3.5 seconds
          thumb.append(image).fadeIn(3500);

          container.append(thumb);
     });
});

Answer 1

我觉得这样的事情可能有用：

//create an array with all the different sizes (widths and heights)
var sizes = [[100,100], [200,200],[300,300],[400,400],[500,500],[600,600]];

$.post(URL, function (data) { 
     var container = $("#container");
     container.html("");

      $.each(data, function (i) {
          var thumb = $("<div>");
          var image = $("<img>").attr("src", this.ImageUrl);
          var title = $("<span>").html(this.Title);

          //get the loop number and find the right image size in the array
          image.attr("width", sizes[i % sizes.length][0]);
          image.attr("height", sizes[i % sizes.length][1]);

          thumb.append(title);
          // each picture will be faded in after 3.5 seconds
          thumb.append(image).fadeIn(3500);

          container.append(thumb);
     });
});

我在这里写了一个演示：http://jsfiddle.net/qfpdgpfo/1/ 注意：我在演示中删除了整个ajax部分，因为我没有要发布的网址，但代码应该是相同的：

演示代码：

//method 1
$(".method1 img").each(function(i) {
    $(this).attr("width", sizes[i % sizes.length][0]);
    $(this).attr("height", sizes[i % sizes.length][1]);
});
//method2
$(".method2 img").each(function(i) {
    $(this).css({"width": sizes[i % sizes.length][0], "height":sizes[i % sizes.length][1]});
})
//method3
$(".method3 img").each(function(i) {
    $(this).addClass("size-" + i % sizes.length)
})

jQuery：在ajax帖子的图像上设置不同的大小

1 个答案: