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

我正在尝试按以下顺序排列图像阵列：

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

您可以使用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'
]);

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

将项分成3组可以简单地使用模运算符(%)来完成，该运算符在尽可能多次拟合一个数字后返回整数的余数，也就是识别它何时是某个数的倍数。

递归地打印出一个数组，并注意索引何时达到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;
}

这是怎么解释的？很抱歉，如果这听起来有点迟钝和谦逊。。。我已经习惯了StackOverflow这个东西。如果你愿意的话，我会给你一个更好的解释和CodePen的例子：)

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

这将在一列中最多放置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>

相关内容

最新更新

热门标签：