缩略图库的布局理论

Question

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

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

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

看起来页面首先被分成列以形成第一个"行".之后,缩略图放在最左边的最短列中(具体来说,我想知道这种特定图像定位技术背后的理论). 例如:数字也可以理解为图像的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变量参数化)
• 所有图像都在一个公共容器中(在这种情况下为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;
}