如果页面调整大小，则在一列中显示图像

Question

关于此处的演示：imagesLoadedDemo

<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
</div>
</div>

css代码：

.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 33.333%;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
width: 100%;
}

当我调整页面大小时，图像会变小并相应地进行调整。但是图像总是以三列形式呈现。

要做的是：如果页面大小调整为非常小的布局，我想让它在一列中呈现。

Answer 1

根据屏幕大小使用媒体查询调整grid-sizer和grid-item类的宽度。

// external js: masonry.pkgd.js, imagesloaded.pkgd.js
// init Masonry after all images have loaded
var $grid = $('.grid').imagesLoaded( function() {
$grid.masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer'
}); 
});

* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 33.333%;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
width: 100%;
}
@media only screen and (max-width: 479px) {
	.grid-sizer, .grid-item { width: 100%; }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.grid-sizer, .grid-item { width: calc(100% / 2); }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.grid-sizer, .grid-item { width: calc(100% / 3); }
}

<h1>Masonry - imagesLoaded callback</h1>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
</div>
</div>

按照这里的参考