缩略图库的布局理论 [英] Layout theory for a thumbnail gallery

问题描述

我正在创建一个完全相同的缩略图库（

---

假设

• 每个图像固定宽度为50像素（参数化为 fixedwidth 变量）


• 所有图像都在一个公共容器中（ code> 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; 
宽度：100％; 
} 
 #gallery img {
 position：absolute; 
 -ms-transition：全1; 
 -o-transition：全1; 
 -webkit-transition：全1; 
 -moz-transition：全1; 
过渡：全1; 
不透明度：0; 
} 
  

I am in the process of creating a thumbnail gallery exactly like this (http://tmv.proto.jp/#!/destroyftw). Currently I am trying to work out the theory for the scripting. The actual script for the webpage is here (http://tmv.proto.jp/tmv_v3.js). As I am relatively new to javascript this has caused me some frustration.

I have already tried using plugins such as masonry and isotope, but they are unable to handle massive amounts of images. Not to mention that infinite scroll doesn't work with filtering, which I need. So I decided to try my hand at coding one myself.

The idea is that user submitted images will be resized to thumbnails with a set width (height will of course be scaled to maintain aspect ratio). Then those thumbnails will be used to create the gallery. The problem I'm having is that the layout, I find, is a little tricky.

It appears that the page is first divided into columns to form the first "row". After that the thumbnails are place into the shortest column that is furthest to the left (Specifically, I'd like to know the theory behind this particular image positioning technique.). Ex: The numbers can also be understood as the image's id. (id="i_1",id="i_2"etc...)

This also causes the cascading fade-in effect that the page does onload and when new images are appended (they're simply fading in according to their id's). I have tried to use the above script page as a reference to no avail. But if anyone would like to check for themselves the functions that I believe are responsible for the thumbnail positioning are under "ViewManager".

Just to reiterate, I am not looking for someone to do my work for me. I just need help working out the theory so I will have somewhere to start.

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

解决方案

Have a look at

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

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

---

Assumptions

• 50 pixels fixed width for each image (parameterized by the fixedwidth variable)
• all images are in a common container (with id gallery in this case)

The demo has some CSS animations, and also repositions the images when the window is resized..

Demo 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>

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

这篇关于缩略图库的布局理论的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！