Question

我搜索过并尝试寻找答案。我认为这可能是微不足道的，但由于我不熟悉使用砌体jquery插件，因此仍然无法找到错误。

我的问题是使用砌体物品不会正确折叠。我想使用两种色谱柱（25％和50％）。该网站将涵盖整个网站。我也在使用purecss框架。以下是占位符图片的示例：

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>masonry / purecss test</title>
	<link rel="stylesheet" href="css/main.css">
	<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
	<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
</head>
<body>

<div class="grid">
	<div class="grid-sizer"></div>
	<div class="grid-item"><img src="http://placehold.it/550x600" alt=""></div>
	<div class="grid-item"><img src="http://placehold.it/450x500" alt=""></div>
	<div class="grid-item--width2"><img src="http://placehold.it/750x500" alt=""></div>
	<div class="grid-item"><img src="http://placehold.it/550x800" alt=""></div>
	<div class="grid-item"><img src="http://placehold.it/550x600" alt=""></div>
	<div class="grid-item"><img src="http://placehold.it/450x500" alt=""></div>
	<div class="grid-item--width2"><img src="http://placehold.it/750x500" alt=""></div>
	<div class="grid-item--width2"><img src="http://placehold.it/800x500" alt=""></div>
</div>

<script>
	var $grid = $('.grid').masonry({
		itemSelector: '.grid-item',
	  // use element for option
	  columnWidth: '.grid-item',
	  percentPosition: true
	});
	$grid.imagesLoaded().progress( function() {
	  $grid.masonry('layout');
	});
</script>

</body>

＆＃13;

css / scss很简单，看起来像这样：

＆＃13;

@import "partials/pure-min";

.grid-sizer,
.grid-item {
	width: 25%;
	float: left;
}
.grid-item--width2 {
	width: 50%;
}

img {
	width: 100%;
}

＆＃13;

砖石/ jQuery的。项目不能正确折叠

0 个答案: