jQuery implémente simplement le flux de cascade d'images

Nous avons déjà partagé de nombreux articles sur le flux en cascade.Dans cet article, nous présentons principalement en détail le code d'implémentation simple du flux en cascade d'images jQuery. J'espère qu'il pourra aider tout le monde. .

Remarque : cet article est basé sur la connaissance de la taille réelle de chaque image
Caractéristiques : numéro de colonne adaptatif, largeur d'image fixe

BOGUE connu :

Comme dans ce cas, il y aura des problèmes lorsque exactement 5 images seront affichées en boucle et qu'il n'y aura que 5 colonnes. La solution est de ne pas donner le style dans l'ordre, mais de mettre les images en haut avec le bas. valeur en premier. Colonne

1. Préparation

1. Nouveau fichier html, puis copiez le code de la couche suivante de #main plusieurs fois. Après tout, plus d'images peuvent refléter l'effet du flux en cascade

2 CSS de base

<p id="main">
  <p class="img-item"><img src="images/img1.png" data-size="398*636" alt=""></p>
  <p class="img-item"><img src="images/img2.png" data-size="560*381" alt=""></p>
  <p class="img-item"><img src="images/img3.png" data-size="338*537" alt=""></p>
  <p class="img-item"><img src="images/img4.png" data-size="599*507" alt=""></p>
  <p class="img-item"><img src="images/img5.png" data-size="532*535" alt=""></p>
</p>

.

2. Commencer

1. Déclaration

#main{
  width: 90%;
  background-color: #dab;
  text-align: center;
  margin:0 auto;
  position: relative;
}
img{
  width: 100%;
  box-sizing:border-box;
  box-shadow: 2px 0 3px #ddd,0 2px 3px #ddd;
}
.img-item{
  position: absolute;
  padding: 3px;
  box-sizing:border-box;
  height: auto;
  display: inline-block;
}

2. >

//获取图片列表包裹层
var $main = $('#main');
//获取窗口,用于自适应
var $mainWidth = $(window).width();
//定义图片宽度
var imgWidth = 150;
//可显示的列数
var columnNumber = Math.floor($mainWidth/imgWidth);
//存储top信息
var data = [];
//初始化,比如当前可以显示6列,那么这里就初始化6个空间
for (var i = 0; i < columnNumber; i++) {
  data[i] = 0;
}

3. Événement de changement de taille de fenêtre

//
var wall = function() {
  //获取相册图片集合
  var $imgs = $('.img-item');
  //遍历图片集合修改top值
  $.each($imgs, function(index, el) {
    //计算当前列数
    var currColumn = index % columnNumber;

    //获取需要显示的高度
    var size = $('img', el).data('size');
    var height = imgWidth / parseInt(size.split('*')[0]) * parseInt(size.split('*')[1])

    $(el).css({
      width: imgWidth,
      left: currColumn * imgWidth,
      top: data[currColumn]
    });

    //如果需要动画可以使用$(el).animate
    data[currColumn] += height;
    //本来这里只需要+=$(el).height()就可以解决,但是初始化时有些问题未解决
  });
};

Recommandations associées :

JS natif pur Explication détaillée de l'utilisation du plug-in de flux de cascade Macy.js

$(window).resize(function(event) {
   //重置窗口宽度
   $mainWidth = $(window).width();
   //重置可显示的列数
   columnNumber = Math.floor($mainWidth / imgWidth);
   //动态修改#main相册包裹层的宽度,使整个相册看起来一直居中
   $main.css({
     width: imgWidth * columnNumber
   });
   //重置top信息
   for (var i = 0; i < columnNumber; i++) {
     data[i] = 0;
   }
   wall();
 });

Explication détaillée de la disposition du flux de cascade jQuery Masonry

Implémentation JS d'un exemple de disposition de flux en cascade

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!