Berikut adalah cara membuat ListView & GridView dengan JavaScript dan CSS
1. Buat file HTML
<!DOCTYPE html>
<html>
<head>
<title>List View & Grid View Dengan Javascript</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<h2>ListView atau GridView</h2>
<p>Klik button untuk memilih ListView atau GridView</p>
<div id="btnContainer">
<button class="btn" onclick="listView()"><i class="fa fa-bars"></i> List</button>
<button class="btn active" onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button>
</div>
<br>
<div class="row">
<div class="column satu">
<img src="images/Chrysanthemum.jpg">
<h2>Column 1</h2>
<p>Pada tanggal 29 Oktober, Kleinrock menciptakan sebuah penemuan besar menjelang abad modern yaitu internet. Secara tidak sengaja kini internet berhasil memecahkan kode digital dan menjadikannya sebagai paket terpisah. Dari situlah Ia kemudian diberi julukan sebagai Bapak Internet
</p>
</div>
<div class="column dua">
<img src="images/Desert.jpg">
<h2>Column 2</h2>
<p>Pada tanggal 29 Oktober, Kleinrock menciptakan sebuah penemuan besar menjelang abad modern yaitu internet. Secara tidak sengaja kini internet berhasil memecahkan kode digital dan menjadikannya sebagai paket terpisah. Dari situlah Ia kemudian diberi julukan sebagai Bapak Internet
</p>
</div>
</div>
<div class="row">
<div class="column tiga">
<img src="images/Hydrangeas.jpg">
<h2>Column 3</h2>
<p>Pada tanggal 29 Oktober, Kleinrock menciptakan sebuah penemuan besar menjelang abad modern yaitu internet. Secara tidak sengaja kini internet berhasil memecahkan kode digital dan menjadikannya sebagai paket terpisah. Dari situlah Ia kemudian diberi julukan sebagai Bapak Internet.</p>
</div>
<div class="column empat">
<img src="images/Koala.jpg">
<h2>Column 4</h2>
<p>Pada tanggal 29 Oktober, Kleinrock menciptakan sebuah penemuan besar menjelang abad modern yaitu internet. Secara tidak sengaja kini internet berhasil memecahkan kode digital dan menjadikannya sebagai paket terpisah. Dari situlah Ia kemudian diberi julukan sebagai Bapak Internet</p>
</div>
</div>
</div>
</body>
</html>
2. Buat File CSS
<style>
* {
box-sizing: border-box;
}
.container{
margin:auto;
background: salmon;
padding: 10px;
width: 900px;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.satu{
background: #aaa;
}
.dua{
background: #bbb;
}
.tiga{
background: #ccc;
}
.empat{
background: #ddd;
}
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
img{
width: 150px;
float: left;
margin-right: 10px;
}
</style>
3. Buat File JavaScript
<script>
var elements = document.getElementsByClassName("column");
var i;
function listView() {
for (i = 0; i < elements.length; i++) {
elements[i].style.width = "100%";
}
}
function gridView() {
for (i = 0; i < elements.length; i++) {
elements[i].style.width = "50%";
}
}
var container = document.getElementById("btnContainer");
var btns = container.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
Jika dijalankan maka akan menampilkan layout seperti gambar dibawah :
Tampilan ListView