8个神奇的网页动态流体布局及其做法揭秘

标签： 神奇 网页 流体 | 发表时间：2011-07-02 18:57 | 作者：MazingTech atu0830
出处：http://www.yeeyan.org

原作者：
来源8 Magical Dynamic and Fluid Layout and How to Make It
译者MazingTech

Introduction
介绍

最近，有一种新的网页布局 ——动态流体布局，很让我感到兴趣。它巧妙地重排元素，并填补了网页的所有空间，而在每个浏览器上显示效果都十分出色，而且通常配以流畅的动画效果。其中有些甚至针对不同类别有不同效果.

这样的网站我找到了8个，他们都有相同的特征。在文章末尾列举了3个JQuery插件, 可以很方便的帮助你达到这些效果。


Recently, I have been quite interested with a new kind of web layout - dynamic and fluid layout. It cleverly fills in all the spaces and rearranges each items and display it nicely on browsers, and they usually come with slick animation too. Some of them even have advance filtering for different categories
I found 8 websites that share the same characteristics and in the last section of this post, I listed 3 jQuery plugins that help you to achieve the same effect as well. Enjoy!

展示

Gimme BarMKSD ArchitectsMarken FilmCascade Brewery CoPixillionSwintonDynamitPinterest

怎么实现
Alright, I guess you want to know how to do it. Luckily, thanks to these 3 plugins, making them are extremely easy!

好了，也许你已经迫不及待想知道怎么实现了。多亏了这三个插件，一切垂手可得。

jQuery Masonry

A dynamic layout plugin for jQuery. The flip-side of CSS floats
一个JQuery动态布局插件,CSS侧边浮动。 Isotope
An exquisite jQuery plugin for magical layouts
一个可以神奇布局的JQuery精美插件。 QuickSand
Reorder and filter items with a nice shuffling animation.
可以重排和过滤，带有滑动动画效果。

  

来源：queness.com

编译：ArSui



添加新评论

相关文章：

  网页设计师的相对主义论

  让人惊艳的动态影像

  你能在因特网的web网页中消失吗？

  蒙娜丽莎她是谁？

  旅行者涌向非洲“神奇的绿洲”

相关 [神奇 网页 流体] 推荐：

8个神奇的网页动态流体布局及其做法揭秘

- atu0830 - 译言-每日精品译文推荐
来源8 Magical Dynamic and Fluid Layout and How to Make It. 最近，有一种新的网页布局 ——动态流体布局，很让我感到兴趣. 它巧妙地重排元素，并填补了网页的所有空间，而在每个浏览器上显示效果都十分出色，而且通常配以流畅的动画效果. 其中有些甚至针对不同类别有不同效果..

神奇的铁磁流体现象

- kaletoppest - 囧片王
用一盆含有磁性的流体物质，就能用磁铁让它展现如此奇幻的现象，很美吧，当然，如果液体颜色漂亮的话会更梦幻：.

11个神奇的网页设计欣赏

- - 帕兰映像
虽然Web 2.0当道，但是，对一个真正的 设计爱好者来说，Web 2.0的设计更像是一堆垃圾. OK，让我们来希望一下这些非Web2.0的神奇网页设计，不管是布局还是创意，都让人拍案叫绝，美不胜收. 原订阅地址即将失效，请大家更换到新的订阅地址:. 帕兰映像, 2010 | 添加到. 欣赏 找到更多你可能喜欢的内容.

神奇的fastcgi_finish_request

- Liút - 火丁笔记
当PHP运行在FastCGI模式时，PHP FPM提供了一个名为fastcgi_finish_request的方法. 按照文档上的说法，此方法可以提高请求的处理速度，如果有些处理可以在页面生成完后再进行，就可以使用这个方法. 听起来可能有些茫然，我们通过几个例子来说明一下：.

神奇小屋

- Phineux - 疯狂的设计
神奇小屋，把每一寸的空间都用到了极致，porterfanna 建筑事务所设计：.

神奇的纸艺

- 孙想钱 - 译言-每日精品译文推荐
来源magic-paper-works 神奇的纸艺. 皮特·克莱森的纸艺利用了二位和三维的关系，他发现平面的纸张实体化简直是一个神奇的过程——或许称得上是魔术，因为整个过程很明显而且图形依然依附于原来的纸张上，而且不会掉下来. 他发现用A4纸做纸艺很有意思，因为A4纸很常见而且用于传媒和传递信息，从这方面讲，A4可以传达很多信息，而我们平时很少注意到A4纸实际重要性.

神奇的纸张

- apple - 玩意儿
日光浴室的杂志广告，本身是一张黑白的图画，当放在阳光底下就变成了多彩的风景了，采用了特殊的纸张和工艺，以宣传日光浴的不同享受. 本文原始链接：http://www.cngadget.cn/shikun-binu.html.

3D音频：神奇理发

- sku - 地理时间
音箱不行的，耳机要好点的，周围环境要安静. 开始吧，你将体验一个坐在理发店中的虚拟场景，尤其是剪刀和剃刀在右耳的时候，超紧张吧…. 继续阅读全文>> 3D音频：神奇理发. © fives for 地理时间, 2011. | 原文链接 | No comment | @地理时间 | 图片托管于又拍网.

【短文】神奇的选择

- 公子小白 - 左岸读书_blog
易睡寒、郭梅梅、高球三位同学，请总结下文的中心思想. 唐朝王维，幼时博览群书，九岁可以挥笔作诗. 搁到现在，最次也能当个艺术培训学校校长. 王维每日出入王侯将相家中，与之诗酒 唱和，其乐无穷. 王维投桃报李，先后写下了《从岐王过杨氏别业应教》、《从岐王夜宴卫家山池应教》、《敕借岐王九成宫避暑应教》等诗，使岐王李隆范名留千古.