jQuery图像网格系统 [英] jQuery image Grid System
本文介绍了jQuery图像网格系统的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个关于图像网格系统的问题。
我创建了这个 DEMO from codepen.io
在此演示中，您可以看到：
< div class =photo-row>
< div class =photo-item>
<！ - 发布图片在这里< img src =image / abc.jpg/> - >
< / div>
< / div>
这个DEMO工作正常，但是。我的问题是如何使用我的网格系统，就像在这个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>
我为此创建了第二个演示： second DEMO 。在第二个演示中，您可以看到网格系统无法像第一个 DEMO <
也是我的jQuery代码：
（function $，
var debounce = function（func，threshold，execAsap）{
var timeout;
return debounced（）{
var obj = this，args = arguments;
函数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'）;
$ b $ *等待DOM准备就绪* /
$（function（）{
//检测调整大小事件
$（窗口）。 smartresize（function（）{
//设置图片大小
$（'。photo-row'）。each（function（）{
var $ pi = $（this）.find （'.photo-item'），
cWidth = $（this）.parent（'。photo'）。width（）;
//生成包含所有图像宽高比的数组$数据（'org-width'）/ $（this）.find（'img'） '）.data（'org-height'）;
））。get（）;
//获取宽度总和
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 + = pa rseInt（$（this）.css（'margin-left'））+ parseInt（$（this）.css（'margin-right'））;
}）;
//计算尺寸
$ pi.each（函数（i）{
var minWidth =（cWidth - sumMargins）/ sumRatios;
$（this）。 （'img'）
.height（Math.floor（minWidth / minRatio））
.width（Math.floor（minWidth / minRatio）* ratios [i]）;
}） ;
}）;
}）;
}）;
等待图像加载* /
$（window）.load（function（）{
//存储原始图像尺寸
$（'。photo-item img'）。each（function（）{
$（this）
.data（'org-width'，$（this）[0] .naturalWidth）
.data（'org-height'，$（this）[0] .naturalHeight）;
}）;
$（window）.resize（）;
}）;
任何人都可以在这方面帮助我吗？因为你将会动态地创建HTML，所以你应该移除<$ c $（
解决方案>
c> .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; //照片数量
（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>'）; //包装照片
}
然后找到剩余部分并用 .photo-row 以及：
$（。photo-item） .each（function（）{
if（$（this）.parent（）。is（：not（.photo-row）））{
$（this）.wrap（'< ; div class =photo-row>< / div>'）;
}
}）;
这将动态地包装您的图片，并让CSS完成它的工作，而不管它们的数量如何：
I have one question about image grid system.
I created this DEMO from codepen.io
In this demo you can see :
<div class="photo-row">
<div class="photo-item">
<!--Posted image here <img src="image/abc.jpg"/>-->
</div>
</div>
This DEMO is working fine but. My question is how can I use my grid system like in this 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>
I created second demo for this: second DEMO. In the second demo you can see the grid system not working like first DEMO.
Also my jQuery code:
(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();
});
Anyone can help me in this regard ? Thank you in advance for your answer.
解决方案
Since you'll be creating the HTML dynamically you should remove the .photo-row container but keep .photo-item like so:
<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>
...
Then what you can do is wrap your elements with .photo-row on page load. First starting with various sets of two:
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
}
Then find the remanding ones and wrap those with .photo-row as well:
$(".photo-item").each(function(){
if($(this).parent().is(":not(.photo-row)")){
$(this).wrap('<div class="photo-row"></div>');
}
});
This will wrap your images dynamically and let the CSS do its job regardless of the number of them:
这篇关于jQuery图像网格系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
