砌體和jQuery內容切換（slideDown，顯示等）

Question

我正在構建一個博客，我只想顯示每個博客文章的相關圖像，使用砌體在一個很好的排序網格中。當用戶點擊圖片時，博客文字內容將顯示在圖片下方（同一頁面上）。由於某些原因，當我添加點擊功能時，隱藏的內容不會顯示出來。我並不熟悉on（）事件處理程序（因爲Masonry而需要），並且可能有些顯而易見的東西我缺少。發生什麼事情是我在DOM中看到元素顯示：block，但它們不顯示。

的HTML -

<?php get_header(); ?> 
     <div id="posts" class="clearfix"> 
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
      <div class="post"> 
       <a class="view" href="#"><?php the_post_thumbnail(465, 999) ?></a> 
       <div class="overlay">+</div> 
       <article> 
        <a href="#" class="close">x</a> 
        <h1><?php the_title() ?></h1> 
        <hr> 
        <?php the_content() ?> 
        <span><?php the_date('Y/d/m') ?></span> 
       </article> 
      </div> 
     <?php endwhile; endif; ?> 
     </div> 
     <div class="navigation"> 
      <?php next_posts_link(); ?> 
     </div> 
<?php get_footer(); ?> 

的使用JavasScript -

var $container = $('#posts'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector: '.post', 
      columnWidth: 475, 
      isAnimated: true 
     }); 
    }); 

    $(document).on("click", "a.view", function(){ 
     if(!$(this).parent().find('article').is(':visible')){ 
      $(this).parent().find('article').slideDown(250); 
     } 
     else { 
      $(this).parent().find('article').slideUp(250); 
     } 
     e.preventDefault(); 
    }); 

    $(document).on("mouseover", "a.view", function(){ 
     $(this).parent().find('.overlay').stop().animate({ opacity: 1 }, 250); 
    }); 
    $(document).on("mouseout", "a.view", function(){ 
     $(this).parent().find('.overlay').stop().animate({ opacity: 0 }, 250); 
    }); 

Answer 1

看看您的網站，我相信您的問題是，當您運行.masonry（）並將所有元素設置爲絕對位置時，Masonry正在計算大小和位置，然後當您展開文本時隱藏在下面的項目...

因此，您需要在擴展項目後「更新」masonry（）。我不太瞭解這個插件，但也許$（'＃posts'）。masonry（'reload'）;將做的伎倆:)！

Answer 2

不知道，但有類似的東西活（試行）也許是：

var $container = $('#posts'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.post', 
     columnWidth: 475, 
     isAnimated: true 
    }); 
}); 

$(document).ready(function(){ 

    $("a.view").live("click", function(){ 
      if(!$(this).parent().find('article').is(':visible')){ 
       $(this).parent().find('article').slideDown(250); 
      } 
      else { 
       $(this).parent().find('article').slideUp(250); 
      } 
      e.preventDefault(); 
     }); 

    $("a.view").live("mouseover", "a.view", function(){ 
      $(this).parent().find('.overlay').stop().animate({ opacity: 1 }, 250); 
     }); 

    $("a.view").live("mouseout", "a.view", function(){ 
      $(this).parent().find('.overlay').stop().animate({ opacity: 0 }, 250); 
    }); 

}); 

編輯關於你的網站

嘗試

<article style="display: block; z-index:1000;position:absolute;">

這似乎顯示文本。

如果要替換下一個塊/圖像，請使用position：absolute;

Answer 3

你的js代碼似乎工作正常，但唯一的問題是<article>標籤與下面顯示的其他圖像重疊。您可以將此代碼應用於您的+圖標（當您懸停任何圖像時），這會顯示圖像詳情並向下推動下面的圖像。

$('div#posts > div.post > a.view').each (function (i) { 
    $(this).click(function() { 
     var articleHeight = $(this).siblings('article').show().height(); 
     $('div#posts > div.post').each (function (j) { 
      if (i%2 == 0 && j%2 == 0 && j > i) { 
       var currentTop = parseInt($(this).css('top')); 
       $(this).css({top : currentTop + articleHeight}); 
      } else if (i%2 != 0 && j%2 != 0 && j > i) { 
       var currentTop = parseInt($(this).css('top')); 
       $(this).css({top : currentTop + articleHeight}); 
      } 
     }); 
    }); 
}); 

P.S.要查看上述代碼的工作情況，只需在控制檯中運行代碼並單擊+。

Answer 4

這是相當簡單 - 只是下面的CSS添加到您的文章標籤

article { 
    position: relative; 
    z-index: 10; 
} 

這將會把它上面的其他圖像。

Answer 5

您需要在完成slideUp時運行砌體重新加載。

.slideUp(400,function() { 
    $('#container').masonry('reload'); 
}); 

Answer 6

Bang的答案會給你帶來90％的出路。

我也有同樣的問題，邦啓發我嘗試解決方案，它並沒有工作，所以我調整了它並解決了它的使用。

這裏就是我所做的：

是，砌築插件的「刷新」功能正是你需要的。

把它放在你的jQuery動畫效果的回調部分。

對我來說，它是：

$（ '＃DIV-說，是擴大'）了slideDown（ 「慢」，函數（）{$（ '＃集裝箱換砌體磚' ）.masonry（'reload'）;}）;

Answer 7

如果有幫助，我做了一個使用磚石佈局，可以用來作爲一個博客索引頁WordPress模板的模板，你可以看到它使用純CSS，你可以對其進行測試，併發揮與它周圍到目前爲止，我使用它作爲必須使用JQuery的替代方法，但不久我會更新這一個以使用JQuery並添加很酷的功能。

`

<?php get_header(); ?> 
    <style> 
     @media all and (min-width: 676px) and (max-width: 1200px) { 
      #list_blog { 
      -moz-column-count: 2 !important; 
      -moz-column-gap: 0px !important; 
      -webkit-column-count: 2 !important; 
      -webkit-column-gap: 0px !important; 
      column-count: 2 !important; 
      column-gap: 0px !important; 
      } 
     } 
     @media all and (max-width: 676px) { 
      #list_blog { 
      -moz-column-count: 1 !important; 
      -webkit-column-count: 1 !important; 
      column-count: 1 !important; 
      } 
     } 
    </style> 
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> "> 
     <div class="x-container-fluid max width"> 
      <div id="blog_container"> 
      <div class="entry-content" id="list_blog" 
       style=" -moz-column-count: 3; 
        -moz-column-gap: 0px; 
        -webkit-column-count: 3; 
        -webkit-column-gap: 0px; 
        column-count: 3; 
        column-gap: 0px; 
       "> 
       <?php query_posts(array('posts_per_page' => 15)); ?> 
       <?php if(have_posts()): while(have_posts()): the_post(); ?> 
       <div class="post_item" style="display: inline-block;background: #fff;border-radius: 5px;box-shadow: 3px 3px 10px #BBB;margin-right: 30px;width: 96%;margin-bottom: 15px;"> 
       <h4 class="post-heading" style="padding: 10px;margin-top: 0;margin-bottom: 10px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> 
       <div class="blog-image"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail($post_id, $size, $attr); ?></a></div> 
       <div class="content" style="padding: 10px;"><?php the_excerpt(); ?></div> 

       </div> 

       <?php endwhile; ?> 
       <div class="navigation"> 
        <span class="newer"><?php previous_posts_link(__('« Newer','example')) ?></span> 
        <span class="older"><?php next_posts_link(__('Older »','example')) ?></span> 
       </div><!-- /.navigation --> 
       <?php endif; ?> 

      </div> <!-- end .entry-content --> 

      </div><!--blog_container--> 
     </div> <!-- .x-container-fluid.max.width --> 
    </article> <!-- end .hentry --> 

    <?php wp_reset_query(); ?> 
<?php get_footer(); ?>`