jQuery implementiert einfach den Bildwasserfallfluss

Wir haben bereits viele Artikel über den Wasserfallfluss geteilt. In diesem Artikel stellen wir hauptsächlich den einfachen Implementierungscode des jQuery-Bildwasserfallflusses vor. Ich hoffe, dass er jedem helfen kann .

Hinweis: Dieser Artikel basiert auf der Kenntnis der tatsächlichen Größe jedes Bildes
Funktionen: adaptive Spaltennummer, feste Bildbreite

Bekannter Fehler:

Wie in diesem Fall wird es Probleme geben, wenn genau 5 Bilder in einer Schleife angezeigt werden und es nur 5 Spalten gibt. Die Lösung besteht darin, den Stil nicht in der richtigen Reihenfolge anzugeben, sondern die Bilder ganz oben anzubringen Wert zuerst. Spalte

1 Neue HTML-Datei und dann den Code der nächsten Ebene von #main mehrmals kopieren. Schließlich können mehr Bilder den Effekt des Wasserfallflusses widerspiegeln

2

2. Erklärung

<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 >

#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;
}

3. Ereignis zur Änderung der Fenstergröße

Verwandte Empfehlungen:

//获取图片列表包裹层
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;
}

Reines natives JS Detaillierte Erläuterung der Verwendung des Wasserfall-Flow-Plug-Ins Macy.js

Detaillierte Erläuterung des Wasserfall-Flow-Layouts von jQuery Masonry

//
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()就可以解决,但是初始化时有些问题未解决
  });
};

JS-Implementierung eines Wasserfall-Flow-Layout-Beispiels

Das obige ist der detaillierte Inhalt vonjQuery implementiert einfach den Bildwasserfallfluss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!