javascript - JS+CSS 如何从右上到左下显示数组中的图片

Question

我正在尝试按以下顺序对齐一组图像:

13 | 10 | 7 | 4 | 1
14 | 11 | 8 | 5 | 2
   | 12 | 9 | 6 | 3

我在js中使用了cssFloat来让序列从右到左显示，但我不知道如何让它在一列中显示3张图片。请问有没有人知道如何让它按我想要的顺序显示？

function loadImagesInSequence(images){
    if(!images.length){
    return;
    }

    var img = new Image(),
        url = images.shift();

    img.onload = function(){loadImagesInSequence(images)};
    img.src = url;
    img.style.width = "10%";
    img.style.cssFloat = "right";

    document.body.appendChild(img);

}

loadImagesInSequence([
'imgs/sample_2016-04-29-23-00-29-794.png',
'imgs/sample_2016-05-04-17-49-17-927.png', 
'imgs/sample_2016-05-04-17-59-00-325.png',
'imgs/sample_2016-05-08-15-28-02-630.png', 
'imgs/sample_2016-05-08-15-37-26-939.png', 
'imgs/sample_2016-05-08-15-47-37-141.png', 
'imgs/sample_2016-05-08-16-06-15-130.png', 
'imgs/sample_2016-05-08-16-07-57-144.png', 
'imgs/sample_2016-05-08-16-10-49-457.png', 
'imgs/sample_2016-05-08-16-35-27-171.png'
]); 

Answer 1

可以使用Array.prototype.splice()，for循环

function loadImagesInSequence(images) {
  if (!images.length) {
    return;
  }
  var curr = images.splice(0, 3);
      var div = document.createElement("div");
      div.style.height = "30px";
      div.style.width = "30px";
      div.style.display = "inline-block";
  for (var i = 0; i < curr.length; i++) {
    (function(n) {
      var img = new Image(),
        url = curr[n];
      img.src = url;
      img.width = "10%";
      div.style.cssFloat = "right";

      div.appendChild(img);
      div.appendChild(document.createElement("br"))
      document.body.appendChild(div);
    }(i))
  }
  loadImagesInSequence(images)

}

loadImagesInSequence([
  'imgs/sample_2016-04-29-23-00-29-794.png',
  'imgs/sample_2016-05-04-17-49-17-927.png',
  'imgs/sample_2016-05-04-17-59-00-325.png',
  'imgs/sample_2016-05-08-15-28-02-630.png',
  'imgs/sample_2016-05-08-15-37-26-939.png',
  'imgs/sample_2016-05-08-15-47-37-141.png',
  'imgs/sample_2016-05-08-16-06-15-130.png',
  'imgs/sample_2016-05-08-16-07-57-144.png',
  'imgs/sample_2016-05-08-16-10-49-457.png',
  'imgs/sample_2016-05-08-16-35-27-171.png'
]);

function loadImagesInSequence(images) {
  if (!images.length) {
    return;
  }
  var curr = images.splice(0, 3);
      var div = document.createElement("div");
      div.style.height = "90px";
      div.style.width = "30px";
      div.style.display = "block";
      
  for (var i = 0; i < curr.length; i++) {
    (function(n) {
      var text = document.createElement("span");
      text.style.display = "block";
      text.textContent = curr[n];
      text.style.border = "1px solid #000";
      text.style.margin = "1px";
      var img = new Image();
      //  url = curr[n];
      // img.src = url;
      // img.width = "10%";
      div.style.cssFloat = "right";

      div.appendChild(text);
      div.appendChild(document.createElement("br"))
      document.body.appendChild(div);
    }(i))
  }
  loadImagesInSequence(images)

}

loadImagesInSequence([
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '10',
  '11',
  '12',
  '13',
  '14'
]);