使用jquery创建我自己的图像画廊网格

问题描述：

我被困在一个问题上，它创建一个图像网格，我无法弄清楚当我到达容器的末尾时如何在下一行开始铺设项目。我知道我可以使用砌体，但与此相关的问题是我的画廊需要全宽和砌体，你会得到1px空白问题masonry 1px issue。而只是使用普通的花车也不适合我，因为我的物品有不同的高度。我如何能解决这个问题的任何想法将是真棒使用jquery创建我自己的图像画廊网格

function layout() { 
    var itemPos = 0; 
    var itemHeight = []; 

    $('.gallery__item-list .gallery__item').each(function(index) { 
    itemHeight.push($(this).height()); 
    $(this).css({ 
     transform: "translate3d(" + itemPos + "px,0px,0)" 
    }); 
    itemPos += $(this).width(); 
    }); 
}

CSS

.gallery__item,.grid-sizer { 
width: 100%; 
position: absolute; 
top: 0; 
left: 0; 
} 
@media screen and (min-width: 400px) { 
.gallery__item,.grid-sizer { 
    width: 50%;} } 
@media screen and (min-width: 600px) { 
.gallery__item,.grid-sizer { 
    width: 33.333%;} 
.gallery__item--body-posts{ 
    margin-bottom: 0px; 
} } 
@media screen and (min-width: 1000px) { 
.gallery__item,.grid-sizer { 
    width: 25%; 
} }

答

您可以设置图像宽度的百分比，如果你的情况允许。假设你在一行中有三个图像，你可以设置宽度：33％，这将占用一行的全部宽度。所以根据计数你应该改变图像的宽度。当你连续获得前三张图像时，接下来的三张图像会进入第二排。我希望这能解决您的问题

使用jquery创建我自己的图像画廊网格

相关推荐