कैसे बनाया जाता है: सूची ग्रिड व्यू

सूची ग्रिड व्यू

पहला कदम - HTML जोड़ें:

फ़ॉन्ट एफेक्ट आयकॉन लाइब्रेरी लोड करने के लिए <!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
बताया है कि लिस्ट व्यू या ग्रिड व्यू को चुनने के लिए बटन
<button onclick="listView()"><i class="fa fa-bars"></i> List</button>
<button onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button>
<div class="row"></div>
  <div class="column" style="background-color:#aaa;"></div>
    <h2>स्तम्भ 1</h2>
    <p>कुछ टेक्स्ट...</p>
  </div>
  <div class="column" style="background-color:#bbb;"></div>
    <h2>स्तम्भ 2</h2>
    <p>कुछ टेक्स्ट...</p>
  </div>
</div>
<div class="row"></div>
  <div class="column" style="background-color:#ccc;"></div>
    <h2>स्तम्भ 3</h2>
    <p>कुछ टेक्स्ट...</p>
  </div>
  <div class="column" style="background-color:#ddd;"></div>
    <h2>स्तम्भ 4</h2>
    <p>कुछ टेक्स्ट...</p>
  </div>
</div>

दूसरा - CSS जोड़ें:

/* दो बराबर चौड़ाई वाले स्तम्भ बनाएं और उन्हें फ्लॉट करें */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}
/* स्तम्भ के बाद के फ्लॉट को साफ करें */
.row:after {
  content: "";
  display: table;
  clear: both;
}

तीसरा - JavaScript जोड़ें:

// class="column" के एलीमेंट प्राप्त करें
var elements = document.getElementsByClassName("column");
// एक चक्र से वारियाबल घोषित करें
var i;
// लिस्ट व्यू
function listView() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "100%"; // एक प्रत्येक एलीमेंट की चौड़ाई 100% करें
  }
}
// ग्रिड व्यू
function gridView() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "50%"; // एक प्रत्येक एलीमेंट की चौड़ाई 50% करें
  }
}