缩略图库的布局理论

Question

我正在创建一个完全相同的缩略图库（http://tmv.proto.jp/#!/destroyftw）。目前我正在尝试制定脚本理论。网页的实际脚本在这里（http://tmv.proto.jp/tmv_v3.js）。由于我对javascript相对较新，这让我有点沮丧。

我已经尝试使用砌体和同位素等插件，但它们无法处理大量图像。更不用说无限滚动不适用于我需要的过滤。所以我决定尝试自己编码。

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

似乎首先将页面分成列以形成第一个“行”。之后，缩略图放在最左边的最短列中（具体来说，我想知道这种特定图像定位技术背后的理论）。 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);

Answer 1

看看

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

http://jsfiddle.net/gaby/DL8Vr/6/

演示

---

假设

• 每张图片固定宽度为50像素（由fixedwidth变量参数化）
• 所有图片都在一个公共容器中（在这种情况下标识为gallery ）

该演示有一些CSS动画，并在调整窗口大小时重新定位图像。

演示HTML

<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

#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;
}

Answer 2

该技术与您描述的完全一致：

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

如果有多个相同长度的列并且所有列都是最短的，那么关于找到第一个最短的部分是必要的。[/ p>

关于填写最短的部分是显而易见的：否则会导致空白空间随机累积。

要了解列必需的原因，您必须先了解<img>标记在HTML中的工作原理：

<img>代码

从最初的日子开始，HTML应该是一种格式化文本的方式。因此，当图像被引入时，它被设计为与文本内联，没有任何花哨的布局（css以后允许你做花哨的布局）。图像的高度始终占据一行文本。例如：

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

最终看起来像这样：

text text text
     .------.
     | img  |
     |      |
text '______' text
text text text

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

图片库布局问题和解决方案

因此，一系列具有不同高度的图像标记如下：

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

可能看起来像这样：

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

..空白空间差距很大。

一个解决方案是使用CSS浮点数。但经验丰富的开发人员会认识到我在一起输入“浮动”和“css”这两个词，并回想起试图让多个花车互相玩耍的噩梦。

另一种解决方案（我经常使用）是固定图像的高度而不是宽度，让图像正常流动。这通常会导致布局看起来像这样：

 _______   _______   ______
|       | |       | |      |
|       | |       | |      |
'_______' '_______' '______'
 ______   ____   ________
|      | |    | |        |
|      | |    | |        |
'______' '____' '________'
 _____   ______   ___________
|     | |      | |           |
|     | |      | |           |
'_____' '______' '___________'

哪个更好，因为它摆脱了很多空白。但问题是画廊的右边缘不均匀，有些人不喜欢。

列解决方案

这引导我们找到你遇到的解决方案。使用<div>或<table>等HTML元素将图像分组为列，并使用上述算法将图像放入列中。你仍然会得到一个不均匀的边缘，但至少它位于画廊的底部，这对一些人来说更好。