我有一个关于图像网格系统的问题。
我从codepen.io创建了这个 DEMO
在此演示中,您可以看到:
<div class="photo-row">
<div class="photo-item">
<!--Posted image here <img src="image/abc.jpg"/>-->
</div>
</div>
这个演示工作正常,但是。我的问题是如何使用此CSS中的网格系统:
<div class="photo">
<div class="photo-row">
<a href="#"><img src="abc.jpg"/></a>
</div>
<div class="photo-row">
<a href="#"><img src="abc.jpg"/></a>
</div>
</div>
我为此创建了第二个演示:第二 DEMO 。在第二个演示中,您可以看到网格系统无法像第一个 DEMO 那样工作。
也是我的jQuery代码:
(function($,sr){
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
/* Wait for DOM to be ready */
$(function() {
// Detect resize event
$(window).smartresize(function () {
// Set photo image size
$('.photo-row').each(function () {
var $pi = $(this).find('.photo-item'),
cWidth = $(this).parent('.photo').width();
// Generate array containing all image aspect ratios
var ratios = $pi.map(function () {
return $(this).find('img').data('org-width') / $(this).find('img').data('org-height');
}).get();
// Get sum of widths
var sumRatios = 0, sumMargins = 0,
minRatio = Math.min.apply(Math, ratios);
for (var i = 0; i < $pi.length; i++) {
sumRatios += ratios[i]/minRatio;
};
$pi.each(function (){
sumMargins += parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
});
// Calculate dimensions
$pi.each(function (i) {
var minWidth = (cWidth - sumMargins)/sumRatios;
$(this).find('img')
.height(Math.floor(minWidth/minRatio))
.width(Math.floor(minWidth/minRatio) * ratios[i]);
});
});
});
});
/* Wait for images to be loaded */
$(window).load(function () {
// Store original image dimensions
$('.photo-item img').each(function () {
$(this)
.data('org-width', $(this)[0].naturalWidth)
.data('org-height', $(this)[0].naturalHeight);
});
$(window).resize();
});
在这方面有人可以帮助我吗?预先感谢您的答复。
最佳答案
由于您将动态创建HTML,因此应删除.photo-row
容器,但保留.photo-item
如下:
<div class="photo-item">
<a href="..."><img src="..." /></a>
</div>
<div class="photo-item">
<a href="..."><img src="..." /></a>
</div>
<div class="photo-item">
<a href="..."><img src="..." /></a>
</div>
...
然后,您可以做的是在页面加载时用
.photo-row
包装您的元素。首先从各种两组开始:var imgGrab = $('.photo-item'); //photos
var imgLength = imgGrab.length; //number of photos
for ( i=0; i<imgLength; i=i+3 ) {
imgGrab.eq(i+1).add( imgGrab.eq(i+1) ).add( imgGrab.eq(i+2) ).wrapAll('<div class="photo-row"></div>'); //wrap photos
}
然后找到剩余的,并用
.photo-row
包裹它们:$(".photo-item").each(function(){
if($(this).parent().is(":not(.photo-row)")){
$(this).wrap('<div class="photo-row"></div>');
}
});
这将动态包装您的图像,并让CSS来完成其工作,而不管它们的数量如何:
CODEPEN
关于javascript - jQuery图像网格系统,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27801055/