Envelopper et dérouler les divs en réponse

J’ai un ensemble de 6 DIV que je veux envelopper dans une nouvelle div toutes les X div en fonction de la largeur d’écran du navigateur.

Donc pour commencer j’ai

Donc, à 980px un ci-dessus, je veux append un nouveau DIV avec style = “display: table-row;” à chaque 3 DIV – faisant ainsi:

Puis, entre 400 et 979 pixels, je veux que le message soit emballé toutes les secondes div.

Et puis en dessous de 399px à chaque 1 DIV, il devient:

Comment puis-je faire ceci? Je veux que cela fonctionne à la fois sur le rendu de la page et aussi redimensionner afin que l’approche réactive fonctionne bien // merci

La solution que j’ai travaillée qui fonctionne bien au chargement de la page mais ne se met pas à jour lorsque vous modifiez la taille du navigateur est la suivante:

Pour 980px et plus

 var divs = $(".blogItem"); for(var i = 0; i < divs.length; i+=3) { divs.slice(i, i+3).wrapAll("
"); }

Pour 400 – 979

 var divs = $(".blogItem"); for(var i = 0; i < divs.length; i+=2) { divs.slice(i, i+2).wrapAll("
"); }

Pour moins de 399

 var divs = $(".blogItem"); for(var i = 0; i < divs.length; i+=1) { divs.slice(i, i+1).wrapAll("
"); }

Qui tous ensemble s’appelle comme:

 function blogPadders () { // read window size var windowSize = $(window).width(); // set div var for wrapping in rows var divs = $(".blogItem"); if (windowSize >= 746) { for(var i = 0; i < divs.length; i+=3) { divs.slice(i, i+3).wrapAll("
"); } } else if (windowSize >= 371 && windowSize <= 745) { for(var i = 0; i < divs.length; i+=2) { divs.slice(i, i+2).wrapAll("
"); } } else if (windowSize <= 370) { for(var i = 0; i < divs.length; i+=1) { divs.slice(i, i+1).wrapAll("
"); } } } blogPadders(); $(document).ready(blogPadders); $(window).load(blogPadders); $(window).resize(blogPadders);

Vous pouvez utiliser la boucle:

 var $div= $('#your_id div'), length = $div.length; for (var i = 0; i < length; i = i + 3) { $div.slice(i, i + 3).wrapAll('
') }

Comme cela applique le script différent pour différentes résolutions.

Exemple:

 if($(window).width <= 768){ var $div= $('#your_id div'), length = $div.length; for (var i = 0; i < length; i = i + 2) { $div.slice(i, i + 2).wrapAll('
') } }

Mais je vous suggère de passer par le bootstrap pour construire votre site web responsive. http://getbootstrap.com/

Mise à jour: pour décompresser lors du redimensionnement:

 $(window).on('resize',function() { //to unwrap $('.group').contents().unwrap(); //now use other codes here to wrap });

Vous pouvez obtenir la taille d’écran avec jQuery et il existe également une fonction de redimensionnement pour gérer les changements de taille d’écran – par exemple:

 $(window).resize(function() { $(window).height(); $(window).width(); });

Vous pouvez écrire une fonction qui obtient toutes les divs avec jQuery puis itère à travers elles en ajoutant votre style d’ display chaque fois où n est déterminé par la taille de l’écran au moment du chargement ou le redimensionnement.