Question

首先，在我制作这个问题之前，我一直在寻找一些类似问题的答案，但没有一个是有用的。我有困难将同位素集中在我的项目上，而不会在其元素之间创建额外的空间，而且我也无法订购其元素（如尺寸为300x460的元素），如下面的屏幕截图所示。我试图将它移动到中心，边缘为左边，但它会将元素彼此粘在一起。

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

图片 - 就像文字一样在彼此之下，所以你的图片顺序不合适。另外，我需要添加＆＃34;制作3列＆＃34;在css。 ......和＆＃34;将列彼此相邻＆＃34; ...并清除一点。

<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

I'm not sure why you use bootstrap classes in your isotope elements. Also, the ordering question doesn't make too much sense for me. It's in the nature of Isotope to reorder it's elements with every resize, the rules depending on layout mode. Sorting makes sense when you have elements with equal dimensions, like in the sorting demo (https://isotope.metafizzy.co/sorting.html).

Here a codepen with Isotope, building the combination of tiles from your image: https://codepen.io/Sixl/full/GMaQre/

Maybe it is somehow of help to you?

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>

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

2 个答案: