在那裏用jQuery

所以，我已經在使用Masonry jQuery Plugin來製作一個Image Gallery Mosaic。好吧，腳本工作「很好」，但是當我加載頁面的圖像CSS對齊是錯誤的，或不工作。請參閱：

screenshot

但是，如果我按CTRL +滾動，或CTRL +/Ctrl + - ，該腳本的工作原理：

screenshot

爲什麼？我如何解決它？

我的JS：

$(function(){ 
     var $container = $("#galeria"); 
      $container.masonry({ 
      itemSelector : 'li', 
      columnWidth : 200 
      }); 
    });

我的CSS：

.organizar-galeria{ width: 100%; } 
.organizar-galeria ul li{ width: 200px; } 
.organizar-galeria ul li img{ float: left; width: 100%; } 
#galeria{ width: 100%; float: left; padding: 5px 0px 10px 0px; }

我的HTML：

 <div id="galeria"> 
     <div class="organizar-galeria"> 
     <?php if($GalleryDAO->countFetch['qntFotos'] == 0 AND $UserDAO->getUid() == $_SESSION['uid']) { ?> 

     <p>Parece que você ainda não tem nenhuma foto. Se o dia estiver legal, que tal tirar uma?</p> 
     </div> 

    <?php } else { ?> 

     <ul> 
      <?php while($GalleryDAO->data = $GalleryDAO->query->fetch(PDO::FETCH_ASSOC)): 
       $var = getimagesize($GalleryDAO->getImageThumb()); ?> 
       <li> 
        <?php if($UserDAO->getUid() == $_SESSION['uid']): ?> 
         <a id="<?php echo $GalleryDAO->getImageId(); ?>" class="remover" href="#" >X</a> 
        <?php endif; ?> 
        <a id="pictures"rel="group1" title="<?php echo $GalleryDAO->getLegenda(); ?>" href="<?php echo $GalleryDAO->getImageURL(); ?>" target="_blank"> 
         <img class="excluirimg" <?=$var[3];?> src="<?php echo $GalleryDAO->getImageThumb(); ?>" alt="Imagem de <?php echo $UserDAO->getNome(); ?>" /></a> 

       </li> 
      <?php endwhile; ?> 
     </ul> 
    </div>

我已經與window.load嘗試和document.ready。

謝謝。

來源

2011-07-22 Guilherme Oderdenge

您可以發佈您網頁的HTML呢？ –

@Corey當然。看到主帖。 –

我不知道砌體，但也許你的功能執行得太早。

你嘗試以下方法，這是專爲圖像加載：

$(function(){ 
    var $container = $('#galeria'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
       itemSelector : 'li', 
       columnWidth : 200 
     }); 
    }); 
});

運氣最好，
羅布森

來源

2011-07-22 19:09:44 SunnyRed

你好，晴天。感謝您的參與，但沒有成功。我已經嘗試過一次了。 –

在那裏用jQuery

回答

相關問題