1

我在我的 Rails 应用程序中有一组模板，我想以 jquery mansory 风格显示它。我参考了本教程： http: //osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout。

我的代码是：

<div id="wrapper-temp">
<div id="list-temp">
        <div class="template">temp1
    </div>
        <div class="template">temp1
    </div>
        <div class="template">temp1
    </div>
        <div class="template">temp1
    </div>
        <div class="template">temp1
    </div>
   </div>
</div>

我的CSS：

 #wrapper-temp
 {
  max-width: 60em; /* 960 px */
  margin: 0 auto;
 }
 #list-temp
 {
    width: 103.125%; /* 990px */
    overflow: hidden;
    margin-left: -1.562%; /* 15px */
    margin-bottom: -1.875em; /* 30px */
 }
 .template
 {
   padding: 25px;
   width: 30.303%; /* 300px */
   float: left;
   margin: 0 1.515% 1.875em; /* 15px 30px */
   color: #eee;
   background: #ff98a1; 
 }
 @media only screen and ( max-width: 40em ) /* 640px */
 {
  .template
  {
    width: 46.876%; /* 305px */
    margin-bottom: 0.938em; /* 15px */
  }
 }
 @media only screen and ( max-width: 20em ) /* 640px */
 {
  #list-temp
  {
    width: 100%;
    margin-left: 0;
  }
    .template
    {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
 }

我的 application.js 包含：

  $(document).ready(function() {

  $( window ).load( function()
  {
   var columns    = 3,
    setColumns = function() { columns = $( window ).width() > 640 ? 3 : $( window ).width() > 320 ? 2 : 1; };

   setColumns();
   $( window ).resize( setColumns );

   $( '#list-temp' ).masonry(
   {
    itemSelector: '.template',
    columnWidth:  function( containerWidth ) { return containerWidth / columns; }
   });
  });
 });

这给出了这样的 o/p（行 div 之间的空格）： 具有固定行高的图像

但我想要这样的 o/p （没有白色花边或用下一个 div 填充空白）

在此处输入图像描述

如果有人能说出这里出了什么问题，真的很感谢您的帮助？谢谢。

4

0 回答 0