有＆＃34;差距＆＃34;我的砖石卡中的行之间

时间：2015-12-26 03:51:03

标签： javascript jquery html css jquery-masonry

我创建了这个网站： https://jsfiddle.net/1pvk13o8/

我正在使用jquery砌体，一切似乎都很好但是有些行之间有空隙或空洞，有什么帮助吗？ 我希望一切都按照它应该对齐

所有文件都在jsfiddle中（代码真的很短）

JS：

< script type = "text/javascript" >
  $(document).ready(function() {
    $('.card').masonry();
  }) < /script>

由于

2 个答案:

答案 0 :(得分：2)

你的脚本无法正常工作。使用这样的代码：

$('.videos').masonry({
  itemSelector: '.card'
});

CSS 

.card  {
  float: left;
   width: 300px;
  margin:10px;
}

如果不这样做，还需要包含Jquery文件。

答案 1 :(得分：1)

这是使用CSS列而不是砌体的版本：

＆＃13;
＆＃13; 
.videos {
  -webkit-columns: 290px 4;
  -moz-columns: 290px 4;
  columns: 290px 4;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  padding: 10px;
  margin: 0 -15px;
}

.card {
  width: 300px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid
  break-inside: avoid-column;
  display: inline-block;
  margin: 10px;
  left: 7px;
  position: relative;
}

/* below is Material Icons font family form Google, which couldn't be linked directly */

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(http://fonts.gstatic.com/s/materialicons/v10/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>


<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo center">Surf Videos</a>
    <ul id="nav-mobile" class="left hide-on-med-and-down">
      <li><a href="sass.html"><i class="material-icons">search</i></a></li>

    </ul>
  </div>
</nav>
<div class="container">
  <div class="videos">
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at asdadasdsadsadsad ajdasjdjas nasdn asdj asdj asd ansdja djasd small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient becaus little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient becaus little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient becaus little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>Lorem ipsum dolor sit amet,</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient becaus little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse
        </p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud eiatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
          deserunt mollit anim id est laborum.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>Iconvenient becaus little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
    <div class="card ">
      <div class="card-image">
        <iframe src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
  </div>
</div>

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-large red">
    <i class="material-icons">add</i>
  </a>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题