我的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-q-c-319-264-9.jpg" alt="">
</div>
</div>
<p>
<button id="append-button">Append new items</button>
</p>您在闭包中有$ 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-q-c-319-264-9.jpg" alt="">
</div>
</div>
<p>
<button id="append-button">Append new items</button>
</p>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句