利用网页元件向左飘浮的做法在网页设计界中存在了好长的一段时间,向左飘浮故名思义就是下一个元件紧接著上一个元件的左边,直到上层空间不足才会换到下一行,这样子的做法一般情况下很完美,因为他很札实的使用了每个网页的版面,那非一般的情况是什麽呢?
当每个列表的内容物长度或大小都不相同的时侯,整个排版就会变得很好笑,有时侯是网页中间多了好几个空洞,不然就是像叠积木一样,这里一块那里一块。
所幸有前辈想出了拼图的列表方法,因为其实我也不知道是谁想出了这个艾地儿(Idea),也不知道该叫这东东什麽名字,所以我自己给他取了 拼图(Puzzle)。
拼图(Puzzle)列表的好处在於跟向左飘浮一样的札实的使用了每个网页的版面,而且他只要设定内容元件相同寛度,不管内容物长度,他都可以排的很整齐。
Neil 的 拼图(Puzzle)实作方式是采用 Javascript 去修改网页元件的 CSS style 来实现,设定一组阵列来放置每行最後一个緃坐标,在所有坐标里先找出最小的,指定到元件的 style.top 值,依序处理所有的元件,後进的元件自然会补到最短的那一行。
- 本文为原创文章, 为尊重著作权, 未经作者同意请勿任意转载
- 关键字 : 拼图(4), Puzzle(3), 版面(2), 每个网页(2), 札实(2), 时侯(2), 使用(2), style(2), 非一般(1), 里一块(1), 采用(1), 这里一块(1), 这样子(1), 这个艾地儿(1), 谁想出(1), 网页中间多(1), 来实现(1), 整齐(1), 指定到元件(1), 所幸(1)
0 0
2013-06-06T17:29:00+0000