4

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

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

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

看起来页面首先被分成列以形成第一个“行”。之后，缩略图被放置在最左边的最短列中（具体来说，我想知道这种特定图像定位技术背后的理论。）。 例如：数字也可以理解为图片的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);
4

2 回答 2

12

看一下

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变量参数化）
  • 所有图像都在一个公共容器中（在这种情况下带有 idgallery）

该演示有一些 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;
}
于 2012-11-22T23:48:40.317 回答
2

该技术完全按照您的描述工作：

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

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

首先填充最短的部分很明显：否则会导致空白区域随机堆积。

要了解为什么需要这些列，您必须首先了解<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 浮动。但是有经验的开发人员会认出我一起输入“float”和“css”这两个词，并回忆起试图让多个浮点数相互配合的噩梦。

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

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

这要好得多，因为它消除了很多空白。但问题是画廊的右边缘不平整，有些人不喜欢。

色谱柱解决方案

这使我们找到了您遇到的解决方案。使用<div>s 或<table>s 之类的 HTML 元素将图像分组到列中，并使用上述算法将图像放入列中。你仍然会得到一个不平坦的边缘，但至少它位于画廊的底部，这对某些人来说更可取。

于 2012-11-22T20:39:03.763 回答