使用jquery或javascript的网格/行视图

Question

我想做一个基于javascript的网格/行视图表。

例如，在一个有10张图片的页面中，用户可以将这些图片视为网格，也可以将其视为行。因此，当他点击网格图标时，他会看到图片是网格，否则他会看到行。

你能给我一些怎么做的小贴士吗？

Answer 1

这方面的基本机制非常简单。只需在列表容器上切换一个类即可。在CSS中，为该类的后代项设置一组规则，以更改浮点数或列或css表属性。还可以使用该主列表类来确定要在项中显示的内容，或者要如何显示它们

一旦删除了类，它们就会返回到块元素和默认css

简单的例子：

HTML：

<ul id="itemList">
    <li>
         <h3 class="title">Item # 1</h3>
        <div class="details">Detals # 1</div>
    </li>
</ul>

CSS：

.grid li{ float:left; width:30%;margin-right:5px}
.grid .details{display:none}

JS：

$('button').click(function(){
    var txt=$(this).text();
    txt= txt=='Grid view'? 'List view' : 'Grid view';
    $(this).text( txt);
    $('#itemList').toggleClass('grid')
});

演示：http://jsfiddle.net/kzDNe/