Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Banner sortieren nach Grössen

Banner sortieren nach Grössen

ich habe Banner 1,2,3,4,5,6 mit versch. Breiten. Alle sind gleich hoch. Nun will ich die Banner so anzeigen lassen, dass jeweils immer die volle Breite der html-Seite ausgenutzt wird. Die Banner sollen per Zufallsreihenfolge angezeigt werden. 1 Breite = 100% der html-Seite 2 Breite = 50% 3 Breite = 25% 4 Breite = 33.3% 5 Breite = 75% 6 Breite = 66.6% Folgende Kombis sind in der Breite möglich: 1 2+2 2+3+3 oder 3+3+2 oder 3+2+3 4+4+4 oder 4+6 oder 6+4 5+3 oder 3+5 Fragen: Wie kann ich am besten die Zufallsgenerierung und Sortierung vornehmen lassen ? Und wie kann ich zusätzlich/optional bestimmen, dass Banner 1 immer an erster Stelle(oben) erscheint ?

Der hier verwendete Code

<style> *{ margin:0; padding:0; box-sizing:bordert-box; } body{ width:100%; } button{ position:fixed; top:0; z-index:12; left:0; } main{ width:100%; height:100vh; display:flex; } .box{ border:1px solid black; } .box0{ width:100%; background:red; } .box1{ width:50%; background:orange; } .box2{ width:25%; background:green; } .box3{ width:33.3%; background:blue; } .box4{ width:75%; background:yellow; } .box5{ width:66.6%; background:grey; } </style> <body> <button>Random boxen <span id="info"></span></button> <main></main> <script> var moeglich=[[0],[1,1],[1,2,2],[2,2,1],[2,1,2],[3,3,3],[3,5],[5,3],[4,2],[2,4]]; const ma=document.getElementsByTagName('main')[0]; const inf=document.getElementById('info'); const but=document.getElementsByTagName('button')[0]; but.addEventListener('click',function(){ let x = Math.round(Math.random() * (moeglich.length-1 - 0)); ma.innerHTML=''; inf.innerHTML=' '+moeglich[x]; for(v=0;v<=moeglich[x].length-1;v++){ bo=document.createElement('div'); bo.className='box box'+moeglich[x][v]; ma.appendChild(bo) } }); but.click(); </script> </body>