1
alexrezit 2012-11-19 23:42:32 +08:00
你没发现那个网站上的图片都不是完整大小的么?
只是四列的网格, 然后图片按某种标准 (比如 popularity) 进行 aspect fill 而已. |
2
xingzhi OP |
3
alexrezit 2012-11-19 23:56:28 +08:00
@xingzhi 就是保持 aspect 不变, 然后填满指定的空间. 你用 iOS 自带的播放器看视频就知道了, 上下有黑边的是 aspect fit, 放大了之后没黑边左右两边截掉的就是 aspect fill.
|
4
qiayue 2012-11-20 00:27:05 +08:00 1
实现过类似的布局,不过我的算法弄得比较复杂。
你想象有很多2*2、2*1和1*1大小(嫌麻烦,去掉了1*2这种情况)的地砖,然后你要在一条宽为4,高不限的区域把地砖无缝铺下去。 你随手拿一块转,扫一眼区域,看最近的可以放下这块砖的位置在哪里,放下去。 重复上一步,知道所有的砖都铺下去了。 再次扫描整个区域,看哪里空着,从最后的位置找比空位置大或者相等的砖,把砖切小后放入空位置。 完成。 |
5
xingzhi OP @alexrezit 貌似我说的和你说的不是同一码事。
--- 目前找到了这个js库: http://masonry.desandro.com/index.html 可以自动填充页面, 但对于同一高度的处理貌似还有问题。 这是同样的问题: http://stackoverflow.com/questions/11413108/masonry-jquery-not-satisfy-with-the-results 这个问题还引发了更有趣的讨论: http://stackoverflow.com/questions/11278754/how-to-implement-a-gapless-block-layout-algorithm 最后,发现涉及到Bin packing这个算法问题。 http://en.wikipedia.org/wiki/Bin_packing_problem 以上是我目前掌握的资料。 有兴趣的同学可以一看。 或给我些建议或资料:) |
6
xingzhi OP |
7
qiayue 2012-11-20 10:49:39 +08:00
@xingzhi 对,在放砖的时候还需要一个高度修正,有些情况,有些位置只能放置1高度砖块,我程序里是有写的,上一个回复里没写。
|
8
august 2012-11-20 10:53:05 +08:00
我最近在寫一個頁面也是模仿 500px 的,用js來控制顯示圖片 absolute 定位
|
9
xingzhi OP |
10
august 2012-11-20 11:16:02 +08:00 1
@xingzhi 自己寫的js 就一個function 貼出來給你看看有沒有用。
function photo_offset_position() { $('div.preview_block').each(function() { var div = $(this); var divRatio = div.width() / div.height(); var img = $('img', this); var imgRatio = img.width() / img.height(); if (divRatio == 1) { if (imgRatio > 1) { img.css('height', div.height()); var offsetX = (img.width() - div.width()) / 2; if (offsetX > 0) img.css('left', -1 * offsetX + 'px'); } else if (imgRatio < 1) { img.css('width', div.width()); var offsetY; if (img.height() / 2 >= div.height()) offsetY = img.height() / 2 - div.height(); else offsetY = (img.height() - div.height()) / 2; img.css('top', -1 * offsetY + 'px'); } else { img.css('height', div.height()); } } else { if (divRatio < imgRatio) { img.css('height', div.height()); var offsetX = (img.width() - div.width()) / 2; if (offsetX > 0) img.css('left', -1 * offsetX + 'px'); } else if (divRatio > imgRatio) { img.css('width', div.width()); img.css('left', 0); var offsetY; if (img.height() / 2 >= div.height()) offsetY = img.height() / 2 - div.height(); else offsetY = (img.height() - div.height()) / 2; img.css('top', -1 * offsetY + 'px'); } else { img.css('height', div.height()); } } }); } 沒有注釋的好習慣-- 將就著看吧 |
11
august 2012-11-20 11:16:55 +08:00
每個 preview_block 要先css定好width height relative 然後 img absolute
|
12
loading 2012-11-20 11:17:33 +08:00
这不就是瀑布吗
|
14
momou 2012-11-20 12:08:43 +08:00
它这个根本没考虑图片大小的问题,指定图框高度为441px按比例缩放,然后布局几种不同的形式变换 |
15
sinreal 2012-11-20 17:45:51 +08:00
感谢这个有趣的讨论。
|
16
javaluo 2012-11-20 18:45:54 +08:00
先等比等宽缩放4个格式,然后css控制就完事了
|