Question

我尝试将砌体用于图像墙。我使用％作为xolumn宽度，并且图像的左侧位置存在问题。

我创建了网格并设置了项目

<div  class="grid">            
      <div class="grid-item grid-sizer loaded"><img src="images/home/10-idol-anthonymeyer.jpg"></div>
      <div class="grid-item grid-sizer loaded"><img src="images/home/13-fiasco-anthonymeyer.jpg"></div>
      <div class="grid-item grid-sizer loaded"><img src="images/home/15-redcollector-alvarez.jpg.png"></div>
      <div class="grid-item grid-sizer loaded"><img src="images/home/21-fiasco.jpg"></div>
      <div class="grid-item grid-sizer loaded"><img src="images/home/24-dirty-breton.jpg.png"></div>
     .....
</div>

Javascript如下

$(document).ready( function() {
// masonry
    $('.grid').masonry({
      // options
        columnWidth: '.grid-sizer',
        itemSelector: '.grid-item',
        //percentPosition: true,
    });
}

和CSS

.grid {
    max-width: 100%;
    margin: no;
    padding: 0;    
}

.grid-sizer, .grid-item{
    width: 19%;
}

.grid-item {    

    float: left;
    padding: 0;
    margin: 0;
    border: 0;
}

.grid-item img {
    width: 100%;
    border: none;
}

第一张图像的左侧位置是正确的，但没有第二张图像的位置。例如，1200px的大小，左边的位置是0，第二个的位置必须大约是243px但是在我的页面中我有这个

1th image : <div style="position: absolute; **left: 0px;** top: 0px;" class="grid-item grid-sizer "><img src="images/home/10-idol-anthonymeyer.jpg"></div>
<div style="position: absolute; **left: 320px;** top: 0px;" class="grid-item grid-sizer "><img src="images/home/13-fiasco-anthonymeyer.jpg"></div>

我可以找到我的代码有什么问题以及如何解决问题。你能帮我吗？

Jquery砌体效果不好：左侧位置不正确

0 个答案: