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>