آموزش Image Grid

<!-- Header -->

<div class="header" id="myHeader">

  <h1>Image Grid</h1>

  <p>برای تغییر نمای شبکه بر روی دکمه ها کلیک کنید.</p>

  <button class="btn" onclick="one()">1</button>

  <button class="btn active" onclick="two()">2</button>

  <button class="btn" onclick="four()">4</button>

</div>

<!-- Photo Grid -->

<div class="row"> 

  <div class="column">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=stones.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=falls2.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=paris.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=mist.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=paris.jpg" style="width:100%">

  </div>

  <div class="column">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=new-nature.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=ocean.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=stones.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=mountainskies.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=new-nature.jpg" style="width:100%">

  </div>  

  <div class="column">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=stones.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=falls2.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=paris.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=mist.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=paris.jpg" style="width:100%">

  </div>

  <div class="column">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=new-nature.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=ocean.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=stones.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=mountainskies.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg" style="width:100%">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=new-nature.jpg" style="width:100%">

  </div>

</div>

<script>

// Get the elements with class="column"

var elements = document.getElementsByClassName("column");

// Declare a loop variable

var i;

// Full-width images

function one() {

    for (i = 0; i < elements.length; i++) {

    elements[i].style.msFlex = "100%";  // IE10

    elements[i].style.flex = "100%";

  }

}

// Two images side by side

function two() {

  for (i = 0; i < elements.length; i++) {

    elements[i].style.msFlex = "50%";  // IE10

    elements[i].style.flex = "50%";

  }

}

// Four images side by side

function four() {

  for (i = 0; i < elements.length; i++) {

    elements[i].style.msFlex = "25%";  // IE10

    elements[i].style.flex = "25%";

  }

}

// Add active class to the current button (highlight it)

var header = document.getElementById("myHeader");

var btns = header.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>