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 ?
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>