阅读更多

6顶
1踩

Web前端
   本文将介绍一种新兴的网页布局——动态和流动布局,它可以巧妙填补网页中的所有空间,并重新显示在每个页面和浏览器中,此布局通常具备平滑的动画效果,部分甚至能够提前根据不同的类别进行筛选。
   下面将列举8个具备这些布局的网站,在这篇文章的最后列举了3个jQuery插件,使用它们可以轻松实现同样的效果。

布局展示

1.Gimme Bar



2.MKSD Architects



3.Marken Film



4.Cascade Brewery Co



5.Pixillion



6.Swinton



7.Dynamit



8.Pinterest



这些网站的布局是如何实现的呢?

别着急,使用下面的这3个jQuery插件,你也可以轻松实现这些漂亮的布局!

1.jQuery Masonry插件

一个jQuery的动态布局插件,同时可以实现CSS侧边弹出导航效果。


2.Isotope插件

一种神奇的布局精美的jQuery插件。


3.QuickSand插件

排序和过滤插件,具有漂亮的图片移动动画。


  • 大小: 32.4 KB
  • 大小: 46.2 KB
  • 大小: 35.2 KB
  • 大小: 32.4 KB
  • 大小: 28 KB
  • 大小: 36.2 KB
  • 大小: 41.6 KB
  • 大小: 35.5 KB
  • 大小: 12.3 KB
  • 大小: 45.6 KB
  • 大小: 23.7 KB
来自: queness.com
6
1
评论 共 1 条 请登录后发表评论
1 楼 paskaa 2011-06-22 14:06
不错,在平板电脑上应该有好的应用

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • c语言生成魔方阵(magic square in c);

    c语言生成 magic square,算法实现简单,3中魔方阵全部给出,目前我认为这是最简洁的代码,而且易懂,如果你有更好的,谢谢分享. 谢谢大家的享用.

  • 运用流体布局的html代码,jquery 流体布局插件:Waterfall

    流体布局(一)jQuery插件:jQuery.Waterfall.js, js的计算方法jQuery1.4.4,IE8.0,opera,firefox,chrome测试通过围观请点击:http://3vke.com下载地址:Waterfall on github1.使用方法:①.加载jQuery库;②.加载jQuery....

  • jQuery实现响应式瀑布流效果(jQuery+flex)

    瀑布流原理:是一种常见的网页布局方式,它的特点是将内容以多列的形式呈现,每一列的内容高度不固定,根据...目前网上很多技术博文是使用定位完成瀑布流效果的,这里将使用jquery和flex布局来实现响应式瀑布流效果。

  • JQuery插件:动态列和无间隙网格布局Mason.js

    ... 在线演示  JavaScript提供很多强有力的方案,... Mason.js是一个jQuery插件,巧妙地填充了这些间隙。 当创建一个网格时候,插件就开始计算这些间隙,然后就使用预定义的元素或是在网格中复制的内容来填充...

  • jQuery Masonry-让你的网页更自然的强大的动态不规则布局插件!

    Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列元素,然后将...

  • 一个帮助你实现pinterest页面布局的jQuery插件 - jQuery.Shapeshift

    如果你使用过pinterest的话,应该非常熟悉它的图片布局方式,今天这里我们介绍一款新的jQuery布局插件 -  jQuery.Shapeshift,能够帮助你生成类似pinterest页面布局的展示方式。 相关阅读:分享一个jQuery动态...

  • 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用文本和图片进行...

  • 10款有趣强大的jQuery插件推荐

    本文收集了 10 款非常有趣的 jQuery 插件,这些插件涉及幻灯片、UI 对话框、图像过滤等多种不同形式。 1. Rotating Slider with Easing 这是一个幻灯片插件,可以让图片沿其垂直轴线自动翻转。演示 2. NyroModal ...

  • jQuery有关的插件

    二、validator是jQuery自带的一个表单验证插件 <script> $.validator.setDefaults({  submitHandler: function() {  alert("提交事件!");  } }); $().ready(func...

  • 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局

    // 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动. // 默认:true animate: true, // 布局重排动画。 // 默认:false animationOptions: {}, // 一对动画选项,具体参数可以参考jquery ....

  • jquery布局插件_12+ jQuery Mobile布局插件和示例

    jquery布局插件 查看我们的12种jQuery Mobile布局和示例的汇编。 这些插件可以帮助您在移动页面布局上创建多个视图和/或拆分视图。 这些插件将根据您的设备方向动态地布置页面 。 玩得开心! 相关文章: 如何...

  • 【jQuery插件】用于瀑布式布局(砖块)的插件jquery Masonry

    最近做项目用到了这个插件,很方便也很强大,与大家分享一下: 看了下面这张对比图你就知道它的用途 国内的花瓣网和拼范网也用到了这种效果。 调用方法: $(‘#wrapper’).masonry({singleMode: false,// ...

  • 10 款有趣强大的 jQuery 插件推荐

    本文收集了10款非常有趣的jQuery插件,这些插件涉及幻灯片、UI对话框、图像过滤等多种不同形式。 1. Rotating Slider with Easing 这是一个幻灯片插件,可以让图片沿其垂直轴线自动翻转。 演示 ...

  • 《软件工艺》语录

    《软件工艺》语录最近居然在市图书馆看到这本书的中译本(英文版名称《Software Craftsmanship》),看来图书馆的进书速度不是我原先想象的比较慢的,才3个月我就看到了它。虽然dearbook早就大张旗鼓的宣传了,我居然还轻松地从图书馆里借到了这本书。在我们这个市图书馆,就连什么“电脑×”的合订本你都无法借到的,因为借的人太多。然而,我居然在图书馆的外借处借到了这一孤本(外借处仅此一本

  • CodeGuru-代码权威

    Jupitermedia Corporation 的CodeGuru-The number one developer site!是一个很好的开发类网站。她的风格我是比较喜欢的,而且值得一提的更新速度和打开速度都较快。(个人觉得和VC知识库类似。)她的介绍见:http://www.codeguru.com/about.php她还有一个很好的论坛,我截了张图,请看!几乎所有的论坛都免不了

  • 用ILDasm.exe深入理解委托

    本文试用.Net框架下的ILDasm.exe工具进一步深入理解委托。通过学习,我们可以了解如何使用ILDASM.exe,同时我们可以从更为深刻的角度理解委托。详细内容请见:http://blog.vckbase.com/zhaotide/archive/2004/11/06/1316.aspx

  • 超低级硬件问题

    上个星期我回老家去了,等我回来我发现一开机就嘟嘟地叫个不停。这两天只有wife会动我的机器,可是她说绝对没有动过(去她妈妈那里了)。难道有什么问题?可是这种报警声是我从没有听过的。等到我进入双系统中的WINME中(居然没有要求输入密码,机子我原来随便加了个密码的)去后发现什么也打不开了。点桌面图标双击程序就好长时间没反应。怪啊! 干脆重启,故障依然,发应和上次一样。难道机子有问题了,还好我没有直接

Global site tag (gtag.js) - Google Analytics