在一些特殊的Web布局设计中，可能当前的CSS并不能满足我们的Web页面布局需求，这时，优秀的jQeury相关的层布局扩展插件可以及时地帮助我们完成需求的布局，这里是10个非常优秀的jQeury层布局插件，可以帮助我们更好地完成类似需求。

UI.Layout

The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

mb.containerPlus

This plugin let’s you build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable.

css-template-layout

The project aims at providing web designers with a way to use the W3’s CSS Template Layout Module today. As a jQuery plug-in, the script parses a given set of CSS rules and displays the content as indicated in the specification. Options include the ability to select the CSS parsed, as well as an optional prefix to use for the CSS rules. Specifying a prefix allows style rules that are interoperable with a possible future browser implementations.

Masonry

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Columnizer

Columnizer will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns.

jQSlickWrap

jQSlickWrap forces text to wrap around the contents of an image, not just its bounding box as it does when you use a float with CSS.

Equal Heights

Equal Heights loops through the top-level child nodes of a specified element and sets their min-height values to that of the tallest.

js-columns

js-columns is designed to help with the creation of newspaper-style column layouts in HTML. While CSS3 has a variety of column-style properties, these are not yet widely implemented, and none help with the creation of page-based layouts.

Columnize

jQue­ry Co­lum­ni­ze al­lows you to crea­te a newspa­per-li­ke co­lumn lay­out.

jLayout

每个插件都链接到了对应的使用说明页面或网站，您可以通过其官方网站说明来进一步了解这些插件的强大功能和具体应用方法。

via: 10 jQuery Plugins to Help with Web Page Layouts
中文翻译：http://www.bbon.cn/2010/05/10-web-page-to-help-you-deal-with-the-layout-of-jquery-plug-in-layer.html

本文来自: 10个帮助你处理Web页面层布局的jQuery插件

您或许也会喜欢：