javascript - 画廊中可变宽度图像的滚动 block

Question

任务详情:

1. 页面上有图库，所有图片预览都加载到页面上。

2. 图像按图像 block 显示(页面上有 1 个 block ，固定 block 宽度和高度)。

3. 所有图像的宽度可变，但高度相同(因此可以 block 中不同数量的图像)。

问题:

按下页面上的导航按钮时按 block 滚动

    =======================
<-  =  xx  sss  dd  qqqq  =  ->
    =======================

xx 等等 - 图库中的不同图像

=== 图片 block 的边框

Answer 1

不是计算 block 中图像的宽度并为每个 block 形成图像数组，我的第一个想法是什么，突然间我发现了这样的任务的更简单和更好的解决方案:

带有模式的一般想法描述:

所有图像页面架构:

    -----------------------
    -  ff  ll  mmmm  aa   -
    -=====================-
<-  -  eeee  bbb  dd  ppp -  ->
    -=====================-        
    -  xx  sss  kk  qqqq  -
    -----------------------

ff 等等 - 图库中的不同图像(float: left；对于每个 img)

--- 标记 block 的*#all_images* (overflow: hidden; possition: absolute; top: ***)

=== 标记 block 的*#visible_frame* (position: absolute;)

当页面上的导航按钮被按下时，我们将 +/- 设为 *#all_images* 的 top 值，结果为 #visible_frame 将显示不同的图像集。