Javascript 缩略图库的布局理论

我正在创建一个完全像这样的缩略图库（）。目前，我正在尝试为脚本编写理论。该网页的实际脚本位于此处（）。由于我对javascript比较陌生，这让我有些沮丧

我已经尝试过使用诸如Mashine和同位素之类的插件，但它们无法处理大量的图像。更不用说无限卷轴不适用于过滤，这是我需要的。所以我决定亲自动手编写一个

其想法是，用户提交的图像将调整为具有设定宽度的缩略图（当然，高度将被缩放以保持纵横比）。然后，这些缩略图将用于创建库。我遇到的问题是，我发现布局有点棘手

似乎页面首先被划分为列以形成第一个“行”。之后，缩略图被放置在最短的列中，即最左边（具体来说，我想知道这种特殊图像定位技术背后的原理）Ex：数字也可以理解为图像的id。（id=“i_1”，id=“i_2”等）

这也会导致页面在加载和附加新图像时产生级联淡入效果（它们只是根据id淡入）。 我试图使用上面的脚本页面作为参考，但没有任何效果。但是，如果有人想自己检查一下，我认为负责缩略图定位的功能在“ViewManager”下

只是重申一下，我不是在找人替我工作。我只是需要你帮我弄明白这个理论，这样我就有地方可以开始了

**Note**(In the script): cellSize= 100; cellMargin=1; doubleSize=201 (cellSize*2+cellMargin); totalCellSize=101 (cellSize+cellMargin);

<pre>
  text text text
  text <img> text
  text text text
</pre>

 ______
|      |           ______
|      |  ______  |      |
|      | |      | |      |
'______' '______' '______'
          ______
 ______  |      |  ______
|      | |      | |      |
|      | |      | |      |
'______' '______' '______'
                   ______
 ______           |      |
|      |  ______  |      |
|      | |      | |      |
'______' '______' '______'

---

该技术的工作原理与您描述的完全相同：

fill the first (from the left or right, doesn't matter) shortest column

如果有几列长度相同且所有列都是最短的，则查找第一个最短列的部分是必要的

首先填写最短的部分是显而易见的：否则会导致空格随机累积

要理解为什么需要列，您必须首先了解

标记在HTML中的工作方式：

标记 从最早的时候起，HTML就被认为是一种格式化文本的方法。所以，当引入图像时，它被设计成与文本内联放置，而不需要任何花哨的布局（css稍后允许您进行花哨的布局）。图像的高度始终占据一行文字。例如：

请注意，第二行的高度会自动增加以适合图像

图像库布局问题及解决方案 因此，一系列具有不同高度的图像标记如下：

<pre>
    <img> <img> <img>
    <img> <img> <img>
    <img> <img> <img>
</pre>

var fixedwidth = 50 + 1, //the +1 is for 1px horizontal margin
    gallery = $('#gallery'), // cache a reference to our container
    imagelist = gallery.children(); // cache a reference to our image list


function layoutImages(){
    var columncount = parseInt(gallery.width()/fixedwidth,10),  // find how many columns fit in container
        columns = [];

    for (var i =0;i<columncount;i++){ // initialize columns (0 height for each)
        columns.push(0);
    }

    imagelist.each(function(i,image){
         var min = Math.min.apply(null, columns), // find height of shortest column
             index = columns.indexOf(min), // find column number with the min height
             x = index*fixedwidth; // calculate horizontal position of current image based on column it belongs

        columns[index] += image.height +1; //calculate new height of column (+1 for 1px vertical margin)
        $(image).css({left:x, top:min}).delay(i*200).animate({opacity:1},100); // assign new position to image and show it
    });
}

$(window).resize(layoutImages).trigger('resize');

<div id="gallery">
    <img src="http://dummyimage.com/50x42/7c6c4c/000000.gif&amp;text=img0">
    <img src="http://dummyimage.com/50x89/2c6c2c/000000.gif&amp;text=img1">
    ....
    <img src="http://dummyimage.com/50x62/2c5c6c/000000.gif&amp;text=img29">
    <img src="http://dummyimage.com/50x58/2c3c9c/000000.gif&amp;text=img30">
</div>

…有着难看的空白

解决这个问题的一个方法是使用CSS浮动。但是有经验的开发人员会认识到我在一起输入单词“float”和“css”，并回忆起试图让多个float彼此友好相处的噩梦

另一个解决方案（我经常使用）是固定图像的高度而不是宽度，让图像正常流动。这通常会导致布局如下所示：

<pre>
    <img> <img> <img>
    <img> <img> <img>
    <img> <img> <img>
</pre>

var fixedwidth = 50 + 1, //the +1 is for 1px horizontal margin
    gallery = $('#gallery'), // cache a reference to our container
    imagelist = gallery.children(); // cache a reference to our image list


function layoutImages(){
    var columncount = parseInt(gallery.width()/fixedwidth,10),  // find how many columns fit in container
        columns = [];

    for (var i =0;i<columncount;i++){ // initialize columns (0 height for each)
        columns.push(0);
    }

    imagelist.each(function(i,image){
         var min = Math.min.apply(null, columns), // find height of shortest column
             index = columns.indexOf(min), // find column number with the min height
             x = index*fixedwidth; // calculate horizontal position of current image based on column it belongs

        columns[index] += image.height +1; //calculate new height of column (+1 for 1px vertical margin)
        $(image).css({left:x, top:min}).delay(i*200).animate({opacity:1},100); // assign new position to image and show it
    });
}

$(window).resize(layoutImages).trigger('resize');

<div id="gallery">
    <img src="http://dummyimage.com/50x42/7c6c4c/000000.gif&amp;text=img0">
    <img src="http://dummyimage.com/50x89/2c6c2c/000000.gif&amp;text=img1">
    ....
    <img src="http://dummyimage.com/50x62/2c5c6c/000000.gif&amp;text=img29">
    <img src="http://dummyimage.com/50x58/2c3c9c/000000.gif&amp;text=img30">
</div>

这是一个更好的办法，因为它消除了很多空白。但问题是画廊的右边缘不平，这是一些人不喜欢的

柱溶液 这让我们找到了你提出的解决方案。使用诸如

s或

s之类的HTML元素将图像分组到列中，并使用上述算法将图像放入列中。你最终还是会得到一个不平坦的边缘，但至少它在画廊的底部，这对一些人来说是最好的。

看看

#gallery{
    position:relative;
    width:100%;
}
#gallery img{
    position:absolute;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    transition:all 1s;
    opacity:0;
}

演示css

---

这项任务远远高于初学者的javascript水平，而且

开始的地方

非常主观，不知道您的功能或设计参数是什么，理论是什么？具体点。听起来你好像明白该怎么做了（添加图像会将其添加到具有最小高度的列中）。你是在问为什么这是平均增长马赛克的最佳策略的理论吗？