jQueryを使用してグリッドをリストビューに置き換えるにはどうすればいいですか？

Question

私はPinterestスタイルのグリッドビューを持っているので、グリッドボタンをクリックするとグリッドをテーブルビュー（以下に示すように）に置き換える必要があります（逆も同様です）。

私はそれを調べましたが、まともな例やドキュメントが見つかりませんでした。だから私はそれについてどうやって行くのか分からない。どんな助けも大歓迎です。

HTML：ボタン

<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：

$(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：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

理想的な実践は、コンテナ上masonryまたはtableの単一のクラスを除いて、両方のビューで同じHTMLを維持することです。

display: table,display: table-row、およびCSSを使用して表のスタイリングをトリガーします。