jquery砌體中心佈局與圖像不適用於加載

我正在一個愛好項目，它使用jquery磚石佈局我的網頁中的項目。我使用中心佈局，以便無論我擁有多少物品，它們總是以我的頁面爲中心。事實上，它的工作原理。問題是，當頁面第一次加載時，佈局不居中，但在頁面的左側。然後它跳轉到所需的佈局。jquery砌體中心佈局與圖像不適用於加載

這是我的URL向你展示我的意思。請注意，突然跳躍後佈局不正確。我想要的是消除跳躍，佈局呈現給用戶時，使佈局居中。

我使用ImageLoaded插件與磚石。下面是相關的代碼：

$('#elements').imagesLoaded(function(){ 
      $('#elements').masonry({ 
       itemSelector: '.element', 
       columnWidth: 245, 
       gutterWidth: 6, 
       isFitWidth: true, 
       isAnimated: true 
      }); 
});

而且居中佈局我想補充以下規則來#elements：

#elements{ 
margin: 0 auto; 
}

如磚石文件here表示。

那麼我的問題是什麼呢？感謝您的任何意見。

編輯：

感謝@Bendim，我想做到這一點的方式。我在下面寫了我的答案，但仍然存在一個問題：整個界面呈現本身需要一段時間，這並不理想。無論如何，我會爲此努力。再次感謝@Bendim。

來源

2012-11-27 Gnijuohz

您是否嘗試過爲'mainContent'容器指定'width'。 – Cyclonecode

@KristerAndersson在我希望它儘可能流暢之前，我做到了。所以，當我調整頁面大小時，我希望項目動畫改變列，但仍然保持在pag中。如果我指定寬度，那麼我不能那樣做。 – Gnijuohz

您可以設置百分比的寬度。 – Cyclonecode

@Bendim給了我一個想法，我打算嘗試一段時間。但是，當我隱藏#elements div後，我的元素在淡入之後重疊。因此，我隱藏了.element div，然後淡入其中。下面是我做的：

.element { 
    display: none; 
}

然後砌築代碼之後：

$('#elements).mansory(
    ... 
); 

$('.element').each(function(i){ 
    $(this).fadeIn('fast'); 
});

它非常完美，沒有跳躍的。

來源

2012-12-03 03:10:55 Gnijuohz

我有同樣的問題。我的解決方案是隱藏砌石元素div，並在所有物品都被引導後將其淡入。沒有javascript的用戶的回退對我來說很重要。

<head> 
<title>Example</title> 
<style type="text/css"> 
#elements { 
    /* hide the elements to avoid jumping */ 
    display: none; 
} 
</style> 
<!-- fallback for people without javascript --> 
<noscript> 
<style type="text/css"> 
#elements { 
    /* overriding the css above */ 
    display: block !important; 
} 
</style> 
</noscript> 
</head> 
<body> 

Your page content… 

<!-- load all jquery from google, with fallback to local file --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="/jquery-1.7.2.min.js"><\/script>')</script> 

<!-- load jQuery plugin that triggers a callback after all images have been loaded --> 
<script src="/jquery.imagesloaded.min.js"></script> 

<!-- load masonry script --> 
<script src="/jquery.masonry.min.js"></script> 


<script type="text/javascript"> 
    var options = { 
     itemSelector: '.element', 
     columnWidth: 245, 
     gutterWidth: 6, 
     isFitWidth: true, 
     isAnimated: true 
    }; 
    var $container = $('#elements'); 
    $container.imagesLoaded(function(){ 
     /* div with content fade in */ 
     $('#elements').fadeIn(1000); 
     /* if all images are loaded it runs the masonry script */ 
     $container.masonry(options); 
    }); 
</script> 

</body> 
</html>

來源

2012-12-02 23:50:16 Bendim

謝謝！但是當我隱藏＃元素時，我的元素會重疊。相反，我隱藏每個元素，然後讓它們出現。 – Gnijuohz

如果您將渲染具有固定高度和寬度的圖像，它們將不會重疊。我的解決方案是使用PHP函數getimagesize($pathToImage)，如果你有固定的寬度（例如260px），你只需要使用此方法的印刷用這種方法不會重疊

<?php 
$imageInfo = getimagesize($pathToImage); 
$originalHeight = $imageInfo[1]; 
$originalWidth = $imageInfo[0]; 
$height = (260/$originalWidth) * $originalHeight; 
print "<img src='path/to/image.jpg' widht='260px' height='$height'>"; 
?>

圖像後來用js加載的圖像根本不需要設置高度，所以你只需要設置固定高度的圖像，這將由php呈現，而不是js。

來源

2015-02-04 10:50:25

jquery砌體中心佈局與圖像不適用於加載

回答

相關問題