帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）

   自适应设计（Responsive Layouts）是时下网页设计领域最热门的话题之一，自适应设计的目标是要让产品界面能够响应用户的行为，根据不同终端设备自动调整尺寸，带给用户良好的使用体验。下面是收集的15款优秀的自适应     <strong>jQuery</strong> 插件，希望这些插件能够帮助到您。    <h3>16. <a href="/misc/goto?guid=4958183645460825319" target="_blank">Tiny Fluid Grid</a></h3>    <p>Tiny Fluid Grid 是一个非常新颖的网格生成工具，能够在线预览和下载。</p>    <p><img style="width:554px;height:254px;" title="tinyfluidgrid" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/187d4ff23364fae97b9629c2e7ed3e71.jpg" width="580" height="266" /></p>    <h3>17. <a href="/misc/goto?guid=4958193490916835242" target="_blank">Jquery Masonry</a></h3>    <p>Masonry 是一款 jQuery 布局插件，可以实现类似Pinterest模式的砌体布局效果。</p>    <p><img style="width:550px;height:340px;" title="jQuery-Masonry" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/48d4ad13fc06039d21738830093c0ded.jpg" width="580" height="359" /></p>    <h3>18. <a href="/misc/goto?guid=4958338175196780124" target="_blank">Foundation</a></h3>    <p>一款易于使用，强大灵活的框架，帮助你构建可以运行在各种终端设备上的应用。</p>    <p><img style="width:537px;height:248px;" title="foundation" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/41d9b2b82ba0d5b580f4c5642a16893d.jpg" width="580" height="268" /></p>    <h3>19. <a href="/misc/goto?guid=4958188556649243208" target="_blank">Diapo</a></h3>    <p>Diapo 是一个开源的自适应幻灯片项目，可以免费下载使用。</p>    <p><img style="width:563px;height:297px;" title="diapo" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/2d807af0123297fd595bb6b3b6779d69.jpg" width="580" height="305" /></p>    <h3>20. <a href="/misc/goto?guid=4958320026409186987" target="_blank">Blue Berry</a></h3>    <p>Blueberry 是一款 jQuery 图片幻灯片插件，用于流体和自适应网页布局。</p>    <p><img style="width:564px;height:191px;" title="blue-berry" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/0f1033da08c837619acf9b435921e757.jpg" width="580" height="196" /></p>    <h3>21. <a href="/misc/goto?guid=4958196135099374021" target="_blank">Slidorion</a></h3>    <p>Slidorion 是轻量的幻灯片插件。可以设定播放速度与播放效果 向上/下/左/右滚动或翻页。</p>    <p><img style="width:540px;height:263px;" title="slidorion" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/94a6e15498679852dccbb726406f4fb6.jpg" width="580" height="283" /></p>    <h3>22. <a href="/misc/goto?guid=4958185321911978689" target="_blank">Bx Slider</a></h3>    <p>另外一款幻灯片插件，支持水平和垂直两方向，还有渐变效果，可自由制定。</p>    <p><img style="width:537px;height:195px;" title="bx-slider" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/07e3f4a24eed3b6971f70914bcca20c9.jpg" width="580" height="211" /></p>    <h3>23. <a href="/misc/goto?guid=4958202365275428494" target="_blank">Crafty Slider</a></h3>    <p>Craftyslide is 是一款非常轻量的幻灯片插件，可用于自适应网站项目。</p>    <p><img style="width:557px;height:290px;" title="crsft-slide" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/412d32ea97d2e1c8362590cdbc37c179.jpg" width="580" height="302" /></p>    <h3>24. <a href="/misc/goto?guid=4958332593648367488" target="_blank">Convert a menu to dropdown for small screens</a></h3>    <p>这款插件能够帮助在小屏幕尺寸下把导航菜单转换为下拉的形式以免遮挡网页内容。</p>    <p><img style="width:540px;height:310px;" title="Convert-a-Menu-to-a-Dropdow" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/72f2dfebec206ab812fd7557b4ec4bc6.jpg" width="580" height="333" /></p>    <h3>25. <a href="/misc/goto?guid=4958189137622498742" target="_blank">Automatic image montage With Jquery</a></h3>    <p>这是一款非常特别的 jQuery 插件，实现自适应蒙太奇相册效果。</p>    <p><img style="width:540px;height:240px;" title="automatic-image-montage-gal" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/1a9373240016cc42d0d620406497329a.jpg" width="580" height="258" /></p>    <h3>26. <a href="/misc/goto?guid=4958343175147017916" target="_blank">Simple Grid</a></h3>    <p>Simple Grid适用于4种尺寸的屏幕：小于720px、大于720px、大于985px和大于1235px。</p>    <p><img style="width:535px;height:247px;" title="simplegrid" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/a0b482555b6aad4ad6295900f3bbbb8e.jpg" width="580" height="268" /></p>    <h3>27. <a href="/misc/goto?guid=4958332583091611038" target="_blank">The Heads Up Grid</a></h3>    <p>Heads-Up Grid is an 是一个自适应的网站格子插件，非常的特别。</p>    <p><img style="width:529px;height:228px;" title="the-heads-up-grid" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/4437344f216c0f1d8a17efe31ba0fc80.jpg" width="580" height="250" /></p>    <h3>28. <a href="/misc/goto?guid=4958343176689532965" target="_blank">Seamless responsive photo grid</a></h3>    <p>一款自适应的 jQuery 图片格子插件，简单易用。</p>    <p><img style="width:550px;height:253px;" title="seamless-responsive-gallery" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/8f85f9ea87851e633ec4419783e31e5c.jpg" width="580" height="267" /></p>    <h3>29. <a href="/misc/goto?guid=4958343177502417462" target="_blank">Jquery responsive Web</a></h3>    <p>很特别的一款用于帮助你构建自适应网站项目的 jQuery 插件。</p>    <p><img style="width:537px;height:356px;" title="jquery-responsive-web" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/e880b96c95de532dbd3b74bb95f42070.jpg" width="580" height="374" /></p>    <h3>30. <a href="/misc/goto?guid=4958192828217136493" target="_blank">Rlightbox</a></h3>    <p>是一款 jQuery UI 插件，有很多特色的弹窗效果，支持主题定制。</p>    <p><img style="width:555px;height:256px;" title="right-box" border="0" alt="帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）" src="https://simg.open-open.com/show/5f4ee3fb92ca2741f8fb5fc67bfc20fb.jpg" width="580" height="268" /><br /> <br /> 转自：<a href="/misc/goto?guid=4958343179035870453" target="_blank">http://www.cnblogs.com/lhb25/archive/2012/06/07/30-jquery-plugins-to-help-with-responsive-layouts-b.html</a></p>