如何使同位素居中并对其元素进行排序？

Question

首先，在我提出这个问题之前，我一直在寻找一些类似问题的答案，但 none 已经足够有用了。如果没有在其元素之间创建额外的 space，我很难将同位素集中在我的项目中，而且我无法对其元素（如 300x460 尺寸的元素）进行排序，如下面的屏幕截图所示。我试图将它移动到带有 margin-left 的中心，但它会将元素相互粘在一起。

My current work

What I want to achieve

这是我目前在 html 和 css 上的工作：

<div class="portfolio">
    <div class="container">
        <div class="portfolio-gallery">
            <div class="row grid">
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x260.png">
                </div>
                <div class="col-md-3 grid-item grid-item--width2">
                    <img src="assets/images/placeholdit300x220.png">
                </div>
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x310.png">
                </div>
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x200.png">
                </div>
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x460.png">
                </div>
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x370.png">
                </div>
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x200.png">
                </div>
            </div>
        </div>
    </div>
</div>

.portfolio{
    padding-top: 64px;
    padding-bottom: 77px;
}
.portfolio .portfolio-gallery{
    margin: 60px auto;
}
.portfolio .grid-item{
    margin-bottom: 20px;
}

Answer 1

图片 - 就像文字在彼此下面，所以你的图片顺序不对。另外，我需要在 css 中添加 "make 3 columns"。 ...和"go columns next to each other"...并清除了一点。

<div class="portfolio">
    <div class="portfolio-gallery">
        <div class="grid-item">
            <img src="assets/images/placeholdit300x260.png">
        </div>
        <div class="grid-item">
            <img src="assets/images/placeholdit300x200.png">
        </div>
        <div class="grid-item">
            <img src="assets/images/placeholdit300x200.png">
        </div>
        <div class="grid-item">
           <img src="assets/images/placeholdit300x220.png">
        </div>
        <div class="grid-item">
            <img src="assets/images/placeholdit300x460.png">
        </div>
        <div class="grid-item">
            <img src="assets/images/placeholdit300x310.png">
        </div>
        <div class="grid-item">
            <img src="assets/images/placeholdit300x370.png">
        </div>
    </div>
</div>

.portfolio{
    padding-top: 64px;
    padding-bottom: 77px;
    float: left;
    column-count: 3;
}
.portfolio .grid-item{
    margin-bottom: 20px;
}`

Answer 2

我不确定您为什么在同位素元素中使用 bootstrap 类。另外，订购问题对我来说意义不大。 Isotope 的本质是在每次调整大小时对其元素进行重新排序，规则取决于布局模式。当元素的维度相同时，排序才有意义，例如排序演示 (https://isotope.metafizzy.co/sorting.html).

这是一个带 Isotope 的代码笔，根据您的图像构建图块组合： https://codepen.io/Sixl/full/GMaQre/

也许对你有帮助？

CSS:

.grid {
  background-color: #none;
  width: 960px;
  margin: 10px auto;
    &:after {
    content: '';
    display: block;
    clear: both;
    }
}

.grid-item {
  position: relative;
  float: left;
  width: 300px;
  height: 200px;
  margin: 10px;
  padding: 10px 30px;
  background: #bada55;
  color: white;
  font-size: 96px;
  border-radius: 3px;
  box-shadow: 2px 2px 12px rgba(0,0,0,0.25);
  &--220 { height: 220px;}
  &--260 { height: 260px;}
  &--310 { height: 310px;}
  &--370 { height: 370px;}
  &--460 { height: 460px;}
}

JS:

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'packery',
});

HTML:

<div class="grid">
  <div class="grid-item grid-item--260">1</div>
  <div class="grid-item grid-item--220">2</div>
  <div class="grid-item grid-item--310">3</div>
  <div class="grid-item grid-item--460">4</div>
  <div class="grid-item grid-item--200">5</div>
  <div class="grid-item grid-item--370">6</div>
  <div class="grid-item grid-item--200">7</div>
</div>

如何使同位素居中并对其元素进行排序？

How do I center isotope and order its elements?

html

css

jquery-isotope