Wie man ein Gitter zur Listenansicht über jQuery ersetzt?

Question

Ich habe eine Pinterest Stil Rasteransicht und ich muss das Raster mit der Tabellenansicht (wie unten zu sehen) auf einen Button klicken (und umgekehrt, wenn Raster-Taste geklickt wird).

Ich habe es nachgeschlagen, konnte aber keine anständigen Beispiele oder Dokumentationen finden. Ich bin mir nicht sicher, wie ich das anstellen soll. Jede Hilfe wird sehr geschätzt.

HTML: Buttons

<a id="#grid"><i class="fa fa-th-large" aria-hidden="true"></i></a> 
<a id="#list"><i class="fa fa-list" aria-hidden="true"></i></a> 

JS: die Daten von Netz und umgekehrt

$(document).ready(function() { 
    $('#list').click(function(event){event.preventDefault();$('.pinGrid .pin').addClass('list-items');}); 
    $('#grid').click(function(event){event.preventDefault();$('.pinGrid .pin').removeClass('list-items');$('.pinGrid .pin').addClass('');}); 
}); 

HTML zur Liste wechseln: Pinterest

<div class="child_vac pin" id=""> 
    <div class="pull-right intrest-box"> 
     <input type="checkbox" class="faChkRnd like" name=""></div> 
    <p class="pull-left">date</p> 
     <h2 class="job-title text-center"> </h2> 
     <p class="info-text text-center" ><b></b></p><p class="box-requirements"> 

     </p> 
     <div class="text-center"> 
     <p class="card-title"> <a href="#moreinfo" data-id="" class="moreinfo">More Information</a></p> 
     </div> 
    </div> 

FIDDLE

Answer 1

Die ideale Praxis ist das HTML das gleiche für beide Ansichten zu halten, mit Ausnahme einer einzigen Klasse von masonry oder table auf dem Behälter.

Verwenden Sie display: table, display: table-row und display: table-cell CSS, um Tabellenstyling auszulösen.