將圖像附加到砌體網格中

Question

我的Js非常有限，因此請不要在以下任何錯誤的情況下開槍射擊我。

我正在嘗試將一些本地存儲的圖像附加到砌體網格中。

目前，當我單擊添加按鈕時，它只會多次添加陣列中的最后一張圖像。

我想做的是每次單擊按鈕添加下7張圖像。

 $(document).ready(function() { var $container = $('.templates'); $container.imagesLoaded(function() { $container.masonry({ itemSelector: '.grid-item', gutter: 12, isFitWidth: true }); }); // Click Function $('#append-button').click(function() { var $items = getItems(); // hide by default $items.hide(); // append to container $container.append($items); $items.imagesLoaded().progress(function(imgLoad, image) { // get item // image is imagesLoaded class, not <img> // <img> is image.img var $item = $(image.img).parents('.grid-item'); // un-hide item $item.show(); // masonry does its thing $container.masonry('appended', $item); }); }); }); // Images Array function getItem() { var $images = ['appply.jpg', 'athena.jpg', 'biz-dev-theme-responsive.jpg', 'boutique-woocommecre-theme.jpg', 'box-grid-theme-responsive.jpg', 'buro.jpg', 'circles-theme-responsive.jpg', 'deliciousmagazine.jpg', 'eshop-woocommerce-theme.jpg', 'fashion-style-wordpress-theme.jpg', 'forthecause.jpg', 'freelancer-theme-responsive.jpg', 'full-slider-theme-responsive.jpg', 'illustration-responsive-theme.jpg', 'large-grid-woocommerce-theme.jpg', 'maximize.jpg', 'olya.jpg', 'panoramic-theme-responsive.jpg', 'peddlar.jpg', 'pixelpress.jpg', 'resort.jpg', 'right-folio-theme-wordpress.jpg', 'sell-woocommerce-wordpress.jpg', 'sentient.jpg', 'shelflife.jpg', 'side-folio-theme-responsive.jpg', 'slider-scroll-wordpress.jpg', 'sliding.jpg', 'startup-responsive-theme.jpg', 'stitched.jpg', 'superstore.jpg', 'theonepager.jpg', 'upstart.jpg', 'vector-theme-responsive.jpg', 'videographer-responsive-theme.jpg', 'function.jpg', 'hub.jpg', 'memorable.jpg']; for (var i = 0; i < $images.length; i++) { var item = '<div class="grid-item">' + '<img src="/includes/images/wordpress/gallery/' + $images[i] + '" /></div>'; } return item; } function getItems() { var items = ''; for (var i = 0; i < 7; i++) { items += getItem(); } // return jQuery object return $(items); } 

 .templates { position: relative; margin: 0 auto; width: 100%; } .templates img { width: 100%; display: block; height: auto; } .grid-item { width: 20%; padding: 12px; margin-bottom: 12px; border: solid 1px #666; } #append-button { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script> <div class="templates"> <div class="grid-item"> <img src="http://lorempixel.com/output/people-qc-319-264-9.jpg" alt=""> </div> </div> <p> <button id="append-button">Append new items</button> </p> 

Answer 1

您在閉包中有$ images，這意味着每次調用getItem都創建相同的圖像實例並進行迭代。 結果總是返回最后的項目。

我修改了您的主要功能getItems以讀取$ images（移至函數外部）。 並使用splice方法從數組中刪除最后7張圖像， 映射以生成字符串，並減少以合並所有字符串。

 $(document).ready(function() { var $container = $('.templates'); $container.imagesLoaded(function() { $container.masonry({ itemSelector: '.grid-item', gutter: 12, isFitWidth: true }); }); // Click Function $('#append-button').click(function() { var $items = getItems(); // hide by default $items.hide(); // append to container $container.append($items); $items.imagesLoaded().progress(function(imgLoad, image) { // get item // image is imagesLoaded class, not <img> // <img> is image.img var $item = $(image.img).parents('.grid-item'); // un-hide item $item.show(); // masonry does its thing $container.masonry('appended', $item); }); }); }); var $images = ['appply.jpg', 'athena.jpg', 'biz-dev-theme-responsive.jpg', 'boutique-woocommecre-theme.jpg', 'box-grid-theme-responsive.jpg', 'buro.jpg', 'circles-theme-responsive.jpg', 'deliciousmagazine.jpg', 'eshop-woocommerce-theme.jpg', 'fashion-style-wordpress-theme.jpg', 'forthecause.jpg', 'freelancer-theme-responsive.jpg', 'full-slider-theme-responsive.jpg', 'illustration-responsive-theme.jpg', 'large-grid-woocommerce-theme.jpg', 'maximize.jpg', 'olya.jpg', 'panoramic-theme-responsive.jpg', 'peddlar.jpg', 'pixelpress.jpg', 'resort.jpg', 'right-folio-theme-wordpress.jpg', 'sell-woocommerce-wordpress.jpg', 'sentient.jpg', 'shelflife.jpg', 'side-folio-theme-responsive.jpg', 'slider-scroll-wordpress.jpg', 'sliding.jpg', 'startup-responsive-theme.jpg', 'stitched.jpg', 'superstore.jpg', 'theonepager.jpg', 'upstart.jpg', 'vector-theme-responsive.jpg', 'videographer-responsive-theme.jpg', 'function.jpg', 'hub.jpg', 'memorable.jpg']; // Images Array function getItem(image) { return '<div class="grid-item">' + '<img src="/includes/images/wordpress/gallery/' + image + '" /></div>'; } function concat(elem1, elem2) { return elem1+elem2; } function getItems() { var items = $images .splice(0,7) .map(getItem) .reduce(concat); return $(items); } 

 .templates { position: relative; margin: 0 auto; width: 100%; } .templates img { width: 100%; display: block; height: auto; } .grid-item { width: 20%; padding: 12px; margin-bottom: 12px; border: solid 1px #666; } #append-button { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script> <div class="templates"> <div class="grid-item"> <img src="http://lorempixel.com/output/people-qc-319-264-9.jpg" alt=""> </div> </div> <p> <button id="append-button">Append new items</button> </p> 

Answer 2

// Images Array
function getItem() {


  for (var i = 0; i < $images.length; i++) {
    var item = '<div class="grid-item">' + '<img src="/includes/images/wordpress/gallery/' + $images[i] + '" /></div>';
  }
  return item;
}

function getItems() {
  var items = '';
  for (var i = 0; i < 7; i++) {
    items += getItem();
  }
  // return jQuery object
  return $(items);
}

每次調用getItem（）時，都將重新開始for循環，並且由於您在循環內覆蓋項var，因此您獲得的是最后一張圖像的7倍。

您可以通過多種方法來解決此問題。 最簡單的方法可能是展開一個for循環並將所有內容粘貼到同一函數中。

function getItems() {
  var items = '';
  var $images = ['appply.jpg', 'athena.jpg', 'biz-dev-theme-responsive.jpg', 'boutique-woocommecre-theme.jpg', 'box-grid-theme-responsive.jpg', 'buro.jpg', 'circles-theme-responsive.jpg', 'deliciousmagazine.jpg', 'eshop-woocommerce-theme.jpg', 'fashion-style-wordpress-theme.jpg', 'forthecause.jpg', 'freelancer-theme-responsive.jpg', 'full-slider-theme-responsive.jpg', 'illustration-responsive-theme.jpg', 'large-grid-woocommerce-theme.jpg', 'maximize.jpg', 'olya.jpg', 'panoramic-theme-responsive.jpg', 'peddlar.jpg', 'pixelpress.jpg', 'resort.jpg', 'right-folio-theme-wordpress.jpg', 'sell-woocommerce-wordpress.jpg', 'sentient.jpg', 'shelflife.jpg', 'side-folio-theme-responsive.jpg', 'slider-scroll-wordpress.jpg', 'sliding.jpg', 'startup-responsive-theme.jpg', 'stitched.jpg', 'superstore.jpg', 'theonepager.jpg', 'upstart.jpg', 'vector-theme-responsive.jpg', 'videographer-responsive-theme.jpg', 'function.jpg', 'hub.jpg', 'memorable.jpg'];   
  for (var i = 0; i < $images.length; i++) {
    var items += '<div class="grid-item">' + '<img src="/includes/images/wordpress/gallery/' + $images[i] + '" /></div>';
  }
  // return jQuery object
  return $(items);
}