randomising the position of HTML elements across divs-CodePudding

I am trying to randomise the position of some images within a div. I have a div with two rows, and in each row, I have another div where each div has an image. The randomisation works, but the layout gets missed up. For instance, sometimes, I get one image in the first row and five images in the second row. I want to get tree images in each row in each randomisation process. How can I maintain the same layout after randomisation? The layout is preserved only when I run the randomisation in one of the rows, but I cannot makeept when I randomise across rows which is what I am aiming for. Could anyone help with how I can achieve that?

<script>
$(function (){
    var visualisations = $(".col-md");
      for(var i = 0; i < visualisations.length; i  ){
    var target = Math.floor(Math.random() * visualisations.length -1)   1;
    var target2 = Math.floor(Math.random() * visualisations.length -1)  1;
  visualisations.eq(target).before(visualisations.eq(target2));
    }
});
</script>

<div id="visualisations_thumbnails" >
            <div class = "row">
            <div  >
            <div >            
                <img src="{% static 'study/img/A.png'%}" style="width:100%"  id ="version1">
            </div>
          </div>
            <div  >
            <div >            
                <img src="{% static 'study/img/b.png'%}" style="width:100%"  id ="version2">
            </div>
          </div>
            <div  >
            <div >            
                <img src="{% static 'study/img/c.png'%}" style="width:100%"  id ="version3">
            </div>
          </div>
<div class = "row">
<div  >
            <div >  
                <img src="{% static 'study/img/e.png'%}" style="width:100%"  id ="version4">    
</div>
</div>
<div  >
            <div >  
                <img src="{% static 'study/img/d.png'%}" style="width:100%"  id ="version5">    
</div>
</div>
<div  >
            <div >  
                <img src="{% static 'study/img/f.png'%}" style="width:100%"  id ="version6">    
</div>
</div>
</div>
</div>

CodePudding user response：

Don't move .col-md's relative to each other. Move them relative to their parent .rows. In the following code, an array containing the numbers 0 to 5 is shuffled and then sliced into two arrays of length 3. Then separately append the .col-mds corresponding to those indexes to each .row.

(function () {
    let rows = $(".row");
    let visualisations = $(".col-md");
    let randArr = [0, 1, 2, 3, 4, 5].sort((a, b) => 0.5 - Math.random());
    let arr1 = randArr.slice(0, 3);
    let arr2 = randArr.slice(3, 6);
    
    for (let i of arr1){
        rows.eq(0).append(visualisations[i]);
    }
    for (let i of arr2){
        rows.eq(1).append(visualisations[i]);
    }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="visualisations_thumbnails">
    <div  style="border: 1px solid green">
        <div >
            1
            <div >
                <img src="{% static 'study/img/A.png'%}" style="width:100%" id="version1" >
            </div>
        </div>
        <div >
            2
            <div >
                <img src="{% static 'study/img/b.png'%}" style="width:100%" id="version2" >
            </div>
        </div>
        <div >
            3
            <div >
                <img src="{% static 'study/img/c.png'%}" style="width:100%" id="version3" >
            </div>
        </div>
    </div>
    <div  style="border: 1px solid violet">
        <div >
            4
            <div >
                <img src="{% static 'study/img/e.png'%}" style="width:100%" id="version4" >
            </div>
        </div>
        <div >
            5
            <div >
                <img src="{% static 'study/img/d.png'%}" style="width:100%" id="version5" >
            </div>
        </div>
        <div >
            6
            <div >
                <img src="{% static 'study/img/f.png'%}" style="width:100%" id="version6" >
            </div>
        </div>
    </div>
</div>

CodePudding user response：

First, you can simplify your live if you turn your multiple .rows with .col-md into a single .row with .col-md-4s.

And then just shuffle them

(using .col-sm-4 in the snippets so the columns are visible in the preview window)

function shuffle(arr) {
  for (let i = arr.length, tmp; i > 1;) {
    const j = Math.floor(Math.random() * i--);
    tmp = arr[i];
    arr[i] = arr[j];
    arr[j] = tmp;
  }
  return arr;
}

const row = document.querySelector('#visualisations_thumbnails > .row');
shuffle([...row.children]).forEach(item => row.appendChild(item));

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<div id="visualisations_thumbnails">
  <div >
    <div >
      1
      <div >
        <img src="{% static 'study/img/A.png'%}" style="width: 100%" id="version1"  />
      </div>
    </div>
    <div >
      2
      <div >
        <img src="{% static 'study/img/b.png'%}" style="width: 100%" id="version2"  />
      </div>
    </div>
    <div >
      3
      <div >
        <img src="{% static 'study/img/c.png'%}" style="width: 100%" id="version3"  />
      </div>
    </div>
    <div >
      4
      <div >
        <img src="{% static 'study/img/e.png'%}" style="width: 100%" id="version4"  />
      </div>
    </div>
    <div >
      5
      <div >
        <img src="{% static 'study/img/d.png'%}" style="width: 100%" id="version5"  />
      </div>
    </div>
    <div >
      6
      <div >
        <img src="{% static 'study/img/f.png'%}" style="width: 100%" id="version6"  />
      </div>
    </div>
  </div>
</div>

or you play with their order.

document.querySelectorAll('#visualisations_thumbnails .col-md-4')
  .forEach(item => item.style.order = Math.floor(Math.random() * 1000));

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div id="visualisations_thumbnails">
  <div >
    <div >
      1
      <div >
        <img src="{% static 'study/img/A.png'%}" style="width: 100%" id="version1"  />
      </div>
    </div>
    <div >
      2
      <div >
        <img src="{% static 'study/img/b.png'%}" style="width: 100%" id="version2"  />
      </div>
    </div>
    <div >
      3
      <div >
        <img src="{% static 'study/img/c.png'%}" style="width: 100%" id="version3"  />
      </div>
    </div>
    <div >
      4
      <div >
        <img src="{% static 'study/img/e.png'%}" style="width: 100%" id="version4"  />
      </div>
    </div>
    <div >
      5
      <div >
        <img src="{% static 'study/img/d.png'%}" style="width: 100%" id="version5"  />
      </div>
    </div>
    <div >
      6
      <div >
        <img src="{% static 'study/img/f.png'%}" style="width: 100%" id="version6"  />
      </div>
    </div>
  </div>
</div>