Question

我将图像附加到div标签，但附加的图像被相互覆盖。

HTML

var array = [{
    imageURL: "http://placehold.it/1920x1920",
    image_Title: "The Cycle",
    image_Description: "What makes the desert beautiful is that somewhere it hides a well.",
    importance: 3
  },
  {
    imageURL: "http://placehold.it/1920x1920",
    image_Title: "The Cycle",
    image_Description: "And, when you want something, all the universe conspires in helping you to achieve it",
    importance: 1
  }, {
    imageURL: "http://placehold.it/1920x1920",
    image_Title: "The leaf",
    image_Description: "All we are lost stars, trying to light up the dark",
    importance: 1
  }

]


for (var i = 0; i < array.length; i++) {

  str1 = ' <div class="grid-item" style="font-family: serif;height:33.3%;width:33.3%;"> <img src="' + array[i].imageURL + '">' + array[i].image_Description + ' </div>';

  if (array[i].importance == 1)
    str1 = ' <div class="grid-item" style="font-family: serif;height:66.6%;width:66.6%;"> <img src="' + array[i].imageURL + '">' + array[i].image_Description + ' </div>';
  $("#grid").append(str1);
}

.grid {
  background: white;
}


/* clear fix */

. grid:after {
  content: '';
  display: block;
  clear: both;
}


/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
  border: solid 15px white;
  position: relative;
  background-color: white;
  font-size: x-large;
  float: left;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

<script src="js/masonry-docs.min.js"></script>
<div style="margin-left: 7%; margin-right: 7%">
  <div class="grid"></div>

我使用JavaScript附加的图像彼此重叠。我希望页面具有砖石布局。

Answer 1

我在这里发表评论是因为我还无法发表评论。您正在使用$("#grid").append(str1);进行追加，但在HTML中，您有<div class="grid"></div>个课程。所以先让它们相同。你能创建小提琴来让它更容易运行和编辑代码吗？

附加图像被覆盖

1 个答案: