砌體/動態幻燈片高度問題

Question

我對接下來要做的項目的下一步感到困惑，希望你能給我一些想法/幫助。

http://goo.gl/4d72h

我使用WordPress和投資組合幻燈片臨（http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/）和砌體（HTTP的組合：//砌築.desandro.com/index.html）創建此項目的登錄頁面。

正如您通過訪問該網站所看到的，每個'帖子'都包裹在一個grid_6浮動中，每行允許兩個浮動，然後我使用砌體將所有東西放在一起。我已經在（窗口）.load函數中封裝了砌體代碼，等待所有特色圖片加載完成，然後開始砌築。非常簡單。

<script> 
    $(window).load(function(){ 
    var $container = $('.masonry-cont-area'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.single-fg-post' 
     }); 
    }); 
}); 
    </script> 

然而，石工只是考慮到它的第一個特點Image的定位等，如果你點擊圖片，或者點，它會推進到一個新的圖像可以是在或長或短身高，這是造成一些問題。因爲砌體已經發生，它與下一個帖子重疊等等。當你點擊上面給出的鏈接上的圖像時，你可以看到我的意思。

那麼，今天我追求的是如何解決這個問題的想法呢？砌體能夠從幻燈片中最高的圖像中獲取高度嗎？它可以隨着圖像被點擊而動態變化嗎？我可以確保底部的保證金始終是絕對定位的物品嗎？

任何想法將非常感激。

感謝所有，你可以做 理查德

Answer 1

你幻燈片插件似乎不公開任何事件掛鉤。所以，你必須這樣做冗長的方式..

變化，你初始化砌築插件

代碼

$(window).load(function(){ 
    var $container = $('.masonry-cont-area'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector : '.single-fg-post', 
      isAnimated: true // added this line to make the resizing of the masonry animated and not instant.. 
     }); 

     // whenever we click on a bullet element 
     $('.pager').on('click','.bullet', function(){ 
      // we use timeout to delay the redrawing of masonry 
      // because the slideshow takes sometime to fade out the current slide 
      // and slide in the new one.. 
      // We have to wait until the slideshow has completed its transition before 
      // redrawing masonry, so that the masonry plugin can use the new slide's dimensions.. 
      setTimeout(function(){ 
       // we make masonry recalculate the element based on their current state. 
       $container.masonry(); 
      }, 250); // 250 is the milliseconds of delay between the click to the bullet and the calling of the masonry redraw.. 
     }); 
    }); 
}); 

親身體驗在http://jsfiddle.net/XjVWN/embedded/result/

Answer 2

一件事是當圖像被改叫.masonry('reload')。