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'
]);

Answer 2

更新：这是基于更改信息的重大重写。

这将在一列中放置最多 3 张图片，然后在左侧添加一张图片，直到用完所有图片。列数会有所不同。

<body>
<div id="box" style="overflow:auto;white-space:nowrap;text-align:right"></div>
<script>
function loadImagesInSequence(images) {
    var count = 0, html = '', iBlock = ''; 
    var i, len = images.length;
    for(i = 0;i < len;i++) {
        iBlock += '<img src="'+ images[i] +'" title="['+ i +']" style="display:block;width:100%" />';
        count++;
        if (count == 3) {
            if (i != (len - 1)) {
                html = '<div style="display:inline-block;width:10%;vertical-align:top">'+ iBlock +'</div>'+ html;
                iBlock = '';
            }
            count = 0;
        }
    }
    if (iBlock != '') {
        html = '<div style="display:inline-block;width:10%;vertical-align:top">'+ iBlock +'</div>'+ html;
    }
    document.getElementById('box').innerHTML = html;
}

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) {
    var count = 0; html = '', iBlock = ''; 
    var i; len = images.length;
    for(i = 0;i < len;i++) {
        iBlock += '<img src="'+ images[i] +'" title="image:['+ i +']" style="display:block;width:100%" />';
        count++;
        if (count == 3) {
            if (i != (len - 1)) {
                html = '<div style="display:inline-block;width:10%;vertical-align:top">'+ iBlock +'</div>'+ html;
                iBlock = '';
            }
            count = 0;
        }
    }
    if (iBlock != '') {
        html = '<div style="display:inline-block;width:10%;vertical-align:top">'+ iBlock +'</div>'+ html;
    }
    document.getElementById('box').innerHTML = html;
}

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']);

<div id="box" style="overflow:auto;white-space:nowrap;text-align:right"></div>

Answer 3

您要问两件事，如何根据项目在数组中的顺序对项目进行分组，以及如何在 HMTL 中构建项目。

将项目分成 3 组可以简单地使用模数运算符 (%) 完成，即 returns 尽可能多地拟合一个数字后的整数余数，也就是识别什么时候是某物的倍数。

递归打印一个数组并观察索引何时达到 3 的倍数，如下所示：

for(i = 0; i < array.length; i++) {
  if i % 3 == 0 {
    // move on to new group using HTML, I'll let you figure this out
  }
}

现在，可以通过多种不同的方式将这些项目分组到 HTML 和 CSS 的垂直列中。首先想到的是使用 table，但我认为这很奇怪而且多余。

我建议制作图像块元素，这样它们每个都有自己的行，将 3 组包装在一个 div 容器中，最后将 div 包装在一个 flexbox 中将项目右对齐。像这样：

<div id="#images">
  <div>
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
</div>
<div>
    <img src="4.jpg">
    <img src="5.jpg">
    <img src="6.jpg">
</div>
etc...
</div>

#images {
  display: flex;
  justify-content: flex-end;
}

#images img {
  display: block;
}

如何解释？对不起，如果它听起来有点迟钝和谦逊......我已经习惯了这个 Whosebug 的东西。如果您愿意，我会带着更好的解释和 CodePen 示例回来:)

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

JS+CSS How to display images from an array from top right to bottom left

javascript

css

image

sequence