缩略图库的布局理论

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

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

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

看来该页面首先被分成列以形成第一个“行”。 之后，缩略图放在最左边最短的列中（具体来说，我想知道这种特殊图像定位技术背后的理论）。 例如 ：数字也可以理解为图像的ID。 （ID = “I_1” ID = “I_2”等）

这也会导致页面加载的级联淡入效果以及附加新图像时（它们根据其ID简单地淡入）。 我试图使用上面的脚本页面作为参考无济于事。 但是如果有人想自己检查我认为负责缩略图定位的function是在“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 

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

---

假设

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

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

演示HTML

 
   ....    

演示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 

关于找到第一个最短的部分是必要的，因为有几个相同长度的列并且所有列都是最短的。

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

要理解为什么列是必要的，您必须首先了解标记在HTML中的工作方式：

标签

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

 
 text text text text  text text text text 
 
 最终看起来像这样： 
 text text text .------. | img | | | text '______' text text text text 
 请注意，第二行的高度会自动增加以适合图像。 
 图库布局问题和解决方案 
 所以，一系列具有不同高度的图像标签如下： 
 
          
 
 可能最终看起来像这样： 
  ______ | | ______ | | ______ | | | | | | | | '______' '______' '______' ______ ______ | | ______ | | | | | | | | | | | | '______' '______' '______' ______ ______ | | | | ______ | | | | | | | | '______' '______' '______' 
  ..空白空间的丑陋空白。 
 一个解决方案是使用CSS浮动。 但经验丰富的开发人员会认识到我在一起输入“浮动”和“css”这两个词，并回想起试图让多个花车互相玩得很好的噩梦。 
 另一种解决方案（我经常使用）是固定图像的高度而不是宽度，让图像正常流动。 这通常会导致布局看起来像这样： 
  _______ _______ ______ | | | | | | | | | | | | '_______' '_______' '______' ______ ____ ________ | | | | | | | | | | | | '______' '____' '________' _____ ______ ___________ | | | | | | | | | | | | '_____' '______' '___________' 
 这是更好的，因为它摆脱了很多空白的差距。 但问题是画廊的右边缘不均匀，有些人不喜欢。 
 列解决方案 
 这引导我们找到你遇到的解决方案。 使用


 s或


 s等HTML元素将图像分组为列，并使用上述算法将图像放入列中。 你仍然会得到一个不均匀的边缘，但至少它位于画廊的底部，这对一些人来说更可取。