使用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%; 
} }

來源

2017-10-16 jordan

您可以設置圖像寬度的百分比，如果你的情況允許。假設你在一行中有三個圖像，你可以設置寬度：33％，這將佔用一行的全部寬度。所以根據計數你應該改變圖像的寬度。當你連續獲得前三張圖像時，接下來的三張圖像會進入第二排。我希望這能解決您的問題

來源

2017-10-16 03:43:48

使用jquery創建我自己的圖像畫廊網格

回答

相關問題