资讯频道 → Web前端
阅读更多

6顶
1踩

Web前端

翻译新闻 使用jQuery插件轻松实现动态流动的网页布局

2011-06-22 10:20 by 见习编辑 hotwind 评论(1) 有8355人浏览
HTML jQuery CSS
   本文将介绍一种新兴的网页布局——动态和流动布局，它可以巧妙填补网页中的所有空间，并重新显示在每个页面和浏览器中，此布局通常具备平滑的动画效果，部分甚至能够提前根据不同的类别进行筛选。
   下面将列举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