Optimize ineffiecient Jquery - UX list to grid view
You can simply use JS to toggle a list class. In CSS, you can simply override the style to either display block (item per row, list style), or display inline-block (several items side-by-side per row, grid style).

A simple demo here:

JS:

$('.btn.grid').click(function (event) {
    event.preventDefault();
    $('.results').addClass('grid');
});
$('.btn.list').click(function (event) {
    event.preventDefault();
    $('.results').removeClass('grid');
});


CSS:

/* default list mode */
.results li{
    padding: 0;
    margin: 0;
    display : block;
}

/* grid mode */
.results.grid li{
    display:inline-block;
    width: 100px;
}

.results img{
    display:block;
    width: 100%;
}