我尝试将砌体用于图像墙。我使用%作为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>
我可以找到我的代码有什么问题以及如何解决问题。你能帮我吗?