jquery - 根据屏幕尺寸隐藏一系列 div 中的第 n 个 div

Question

我有一个简单的照片库页面，它根据类别显示不同的画廊。

Cat Name1 - Album1  Album 2 Album 3
Cat Name2 - Album1   
Cat Name2 - Album1  Album 2 Album 3
Cat Name4 - Album1  Album 2 

专辑的每个类别图标和缩略图都在 1 行中，任何类别都不会显示超过 4 个缩略图

对于我的手机屏幕宽度 320px & 360px 我只需要将它显示为一个相册

Cat Name1 - Album1  
Cat Name2 - Album1   
Cat Name2 - Album1
Cat Name4 - Album1

对于我的手机屏幕宽度 480px 和 640px，我只需要将两个相册显示为

Cat Name1 - Album1  Album 2 
Cat Name2 - Album1   
Cat Name2 - Album1  Album 2 
Cat Name4 - Album1  Album 2 

示例 HTML

<!-- Album Category -->
<div class="Album-Row-Wrapper"> <a href="file1.html">
        <div class="category-icon" ">
            <img src="http://placehold.it/40x150&text=A"  >
        </div>
    </a>

    <!-- Album Icon Images --> <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=1" >
        </div>
    </a>
 <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=2" >
        </div>
    </a>
    <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=3" >
        </div>
    </a>

    <!-- Repeater Child -->
</div>
<!-- Album Category -->
<!-- Album Category -->
<div class="Album-Row-Wrapper"> <a href="file1.html">
        <div class="category-icon" ">
           <img src="http://placehold.it/40x150&text=B"  >
        </div>
    </a>

    <!-- Album Icon Images --> <a href="file2x?AlbumID=69&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=1" >
        </div>
    </a>

    <!-- Repeater Child -->
</div>
<!-- Album Category -->
<!-- Album Category -->
<div class="Album-Row-Wrapper"> <a href="file1.html">
        <div class="category-icon" ">
            <img src="http://placehold.it/40x150&text=C"  >
        </div>
    </a>

    <!-- Album Icon Images --> <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=1" >
        </div>
    </a>
 <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=2" >
        </div>
    </a>
    <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=3" >
        </div>
    </a>

    <!-- Repeater Child -->
</div>

我正在尝试使用 CSS 解决方案来实现这一点，但它无法正常工作

我想为每个类别隐藏专辑 2、3、4 的缩略图。

我不确定如何做到最好或让它与 css 一起工作。

JSFiddle 示例 http://jsfiddle.net/fA2WE/1/

Answer 1

您可以使用 css 媒体查询 来实现:

例如:

/* Desktop */
@media all and (max-width: 959px) {

    #album1, #album2 {display:block;}
    #album3, #album4 {display:none;}
}

/* Tablet */  
@media all and (max-width: 720px) {

    ...

}

/* Mobile */  
@media all and (max-width: 479px) {

    #album1, #album2 {display:none;}
    #album3, #album4 {display:block;}

}

更多关于媒体查询和处理屏幕尺寸的信息:http://css-tricks.com/css-media-queries/