有“;间隙”;在我的砖石卡片上的一排排之间
There are "gaps" between rows in my masonry cards
我已经创建了这个网站：https://jsfiddle.net/1pvk13o8/
我使用的是jquery砌石，所有这些似乎都很好用，但有些行之间有空白或孔洞，有什么帮助吗？我希望所有东西都能像一样对齐
所有文件都在jsfiddle（代码量非常短）中
JS:
< script type = "text/javascript" >
$(document).ready(function() {
$('.card').masonry();
}) < /script>
感谢
您的脚本不起作用。使用这样的代码：
$('.videos').masonry({
itemSelector: '.card'
});
CSS
.card {
float: left;
width: 300px;
margin:10px;
}
如果没有，还需要包含Jquery文件。
这里有一个使用CSS列而不是砖石结构的版本：
.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;
}<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>相关文章：
- Windows8应用程序(html&Javascript）:从图片库(除了文件选择器）显示图像的另一种方式
- Javascript返回值只在循环中返回一次
- 有没有一种方法可以添加相同的项目val＝“0”;4〃;到JavaScript中数组的每个对象
- 有没有一种方法可以防止img get请求使用css或js发生
- Javascript，有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- Jquery FadeIn FadeOut 只工作一次
- 如何获取不属于我项目的上一页的URL
- Javascript html每点击一次就会更改url
- 键入最后一位数字后自动提交
- 如何在chrome扩展中存储数据/结果，以及如何使用setTimeout使其只被调用一次
- fluxxor向一个flux实例添加一组以上的操作
- 如何在Facebook上的iframe应用程序中使后退按钮返回到上一页
- 当单击第一个李时，它显示内容一，当单击第二个李时，它显示内容二
- 从我的控制器返回一个不同于200的代码以触发ajax错误，这被认为是一种好的做法吗
- 有没有一种方法可以在控制台关闭的情况下让console.log(）在IE中记录消息
- 有“;间隙”;在我的砖石卡片上的一排排之间
- 打印出一副卡片
- js API:是否有一种方法可以让用户保存卡片信息并在以后使用它进行转账?
- 按下任意一张卡片，使p标签进入输入字段
- 用一堆卡片加载数组
