向下滑動類似於谷歌圖像的結果

我正在嘗試製作類似於Google在其圖像搜索結果中使用的向下滑動功能。向下滑動類似於谷歌圖像的結果

我已經得到的東西這個的jsfiddle內有些工作：

http://jsfiddle.net/ultraloveninja/X7rmK/

使用jQuery：

$(document).ready(function() { 
    $('.slider').click(function (e) { 
     e.preventDefault(); 
     $('.internal').slideUp('normal'); 
     if ($(this).next().is(':hidden') === true) { 
      $(this).addClass('on'); 
      $(this).next().slideDown('normal'); 
     } 
    }); 
    $('.internal').hide(); 
});

但我不知道如何得到它，這樣涉及的內容圖像在它的下面。

我發現這個鏈接： http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

但隨着同位素集成時它，它是造成一些問題。所以，我試圖推出自己的產品，看看我能否實現類似的功能，以便在使用同位素進行過濾時也能正常工作。

不太確定我是否需要在CSS中設置不同的內容，或者如果我需要以不同的方式創建JS命令。

來源

2013-06-11 ultraloveninja

，爲時已晚ask..but你有沒有解決這個問題？即使我被卡在相同的點與定位和浮動相互衝突！任何幫助或擡頭將是真棒！ – Ajasra

@Ajasra - 我從來沒有真正回過頭去看，但是在看完之後，你可能會想要做Pervara建議的事情，並將所有內容保留在一個特定的div中，而不是將它們分開。這樣你可以保持所有的定位一樣。 – ultraloveninja

感謝UVninja回來。但Pevara的解決方案與jsfiddle協同工作，但與實際問題無關，因爲您正處於同位素和codrops插件之間的爭奪戰中。那麼我正試圖把它寫出來....lets看看會發生什麼。將更新較新的讀者，如果我有一個具體的解決方案。 – Ajasra

爲什麼不把你的內容放在滑塊後面，在圖像之後。它們屬於一個整體，所以將它們分組是很有意義的。它也會讓你的問題（和js）變得更容易。看看這個：
http://jsfiddle.net/Pevara/X7rmK/2/

的HTML在現在這個樣子：

<div class="slider"> 
    <img src="..." /> 
    <div class="internal">Content here</div> 
</div>

而且JS成了很多短：

$('.slider').click(function() { 
    $(this).find('.internal').slideToggle(); 
});

來源

2013-06-11 19:34:37 Pevara

謝謝！但是我試圖通過視覺獲得的東西類似於以下內容：http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/ 唯一的問題是由於某種原因它與同位素發生衝突。 – ultraloveninja

向下滑動類似於谷歌圖像的結果

回答

相關問題