Question

我遇到问题，我的卡片未正确对齐，我的意思是我得到了this

我尝试过的是获取卡片的位置，然后添加我要移动的卡片的高度，但它失败了。我仍然有很大的空白。

以下是我的一些代码：

此代码是为了获得高度：

$(".cardItem").each(function(i, item) {
      // when index is 0 then top position is 0 and left position is 0
      if (i == 0) {
         $('.mainCardHolder' + i).css('left', 0);
         $('.mainCardHolder' + i).css('position', 'static');
      }

      // when index is 1 then top position is 0 and left position is the half of the screen
      if(i == 1) {
          $('.mainCardHolder'+i).css('position', 'static');
          $('.mainCardHolder'+i).css('left', window.screen.width / 2);
      }

      // if is greater than 1 then goes the magic
      if(i > 1) {
         // Getting the final position using the top of the two previous cards and adding the height of the card I want to move
         var finalPos = $('.mainCardHolder' + (i-2)).offset().top + ($('.mainCardHolder' + (i-2)).height());
         console.log(finalPos);

         // Setting the final position to the card I move
         $('.mainCardHolder'+i).css('top', finalPos);

         // If is unpair then the left position is the half screen 
         if(i % 2 != 0) {
             var widthDividedBy2 = window.screen.width / 2;
             $('.mainCardHolder'+i).css('left', widthDividedBy2);
             $('.mainCardHolder'+i).css('position', 'static');
         }

         // If is pair then the left pos is 0
         if(i % 2 == 0) {
             $('.mainCardHolder'+i).css('left', 0);
             $('.mainCardHolder'+i).css('position', 'static');
         }
    }
});

这些卡是动态添加的，我使用materializecss作为前端，我使用firebase作为后端。

EDIT1：这就是我想要实现的目标：Wallapop

Answer 1

这样的事情应该让你开始......这只是众多方法中的一种： - ）

var numberOfCards = 20;
var numberOfColumns = 4;

var container = document.getElementById("container");
var columns = [];

for (var index = 0; index < numberOfColumns; index++) {
  var newColumn = document.createElement('div');
  newColumn.className = "column";
  container.appendChild(newColumn);
  columns.push(newColumn);
}

for (var index = 0; index < numberOfCards; index++) {
  var columnIndex = index % numberOfColumns;
  var newCard = document.createElement('div');
  newCard.className = "card";
  columns[columnIndex].appendChild(newCard);
  newCard.style.height = (Math.random() * 500) + 'px';
}

#container {
  display: flex;
}

#container>.column {
  flex: 1 1 0px;
  background-color: green;
}
#container>.column>.card {
  margin: 10px;
  background-color: blue;
  width: 100%;
}

<div id="container">

</div>

Answer 2

我终于在codepen中找到了解决方案，这家伙已经完全挽救了我的生命

.cards-container {
  column-break-inside: avoid;
}
.cards-container .card {
  display: inline-block;
  overflow: visible;
}

@media only screen and (max-width: 600px) {
  .cards-container {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}
@media only screen and (min-width: 601px) {
  .cards-container {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media only screen and (min-width: 993px) {
  .cards-container {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}
.text-center {
  text-align: center;
}

https://codepen.io/mike-north/pen/MwVoYp

如果codepen的作者正在阅读本文，我想对你说谢谢

如何正确对齐不同屏幕的卡？

2 个答案: