jquery - 响应式(？)网格系统

Question

查看this site .如您所见，它使用响应式网格系统。网格流在 1920x1080 和 1024x768 屏幕尺寸上完美运行。

我想对我的网站做同样的事情，但没有成功。我已经尝试了一些框架(responsivegridsystem.com、foundation.zurb.com 和 gumbyframework.com)，但还是没有成功。

更具体地说，我有一个“2 列”布局。左列具有固定宽度，右列包含其他几列。

按照我在 1920x1080 中的布局(完美运行):

我在 1280x1024 中的布局(不需要的空间):

最后，我在 1024x768 中的布局(同样我有未使用的空间):

我想集中所有布局而不是“不需要的空间”——就像我之前经过的网站一样。

我的 HTML:

<div class="wrap">
<div class="left-sidebar float-left">
  <div class="shopping-list">
     <div class="inside-padding-10">
        <div class="shopping-list-header">
           <h1>0</h1>
           <p>
              Produtos na sua lista de compras
           </p>
        </div>
        <hr />
        <div class="shopping-list-body">
           <button>Calcular menores preços</button>
        </div>
     </div>
  </div>
  </div>
  <div class="main float-right">
  <ul class="products-list section group">
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
  </ul>
  </div>

CSS:

.wrap {
   padding-right: 195px;
   overflow: hidden;
}

.main {
   margin: 0 -220px 0 auto;
   width: 100%;
}

.main-content .left-sidebar {
   width: 200px;
}

ul.products-list {
   width: 100%;
}

ul.products-list li {
   background-color: red;
   width: 14.6em;
   height: 300px;
   margin-bottom: 5px;
   float: left;
}

有人可以帮助我吗？

Answer 1

快速使用控制台显示 $.fn.isotope — Isotope是 David de Sandro 的 jQuery 插件允许 block 布局响应性地重新排列(针对各种刺激)。查看 DOM 检查器会发现元素上的意外结构，但它看起来在功能上仍然是可能的。

编辑:再次检查 DOM — 它确实是同位素:$('[class*=isotope]').length>0 === true