javascript – JS / jQuery适合div内的所有图像(不含空格)

前端之家收集整理的这篇文章主要介绍了javascript – JS / jQuery适合div内的所有图像(不含空格)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个div称它为#container,
在这个#container里面,我有数量img标签称之为图像
n可以是2,10,40等等.
我想知道如何在一个#container内容数量的图像来关闭所有的空白区域.质量无关紧要
这是我到现在为止所做的
var amount = $("#container > img").length;
var amount_w = amount*200; //200 width of 1 image 
var amount_h = amount*130; //120 height  image 
var refH = $("#container").height();
var refW = $("#container").width();

var refRatio = refW/refH;
$("#container img").each(function(){
     $(this).height((amount_h-130)-refH);
     $(this).width((amount_w-230)-refW);
});

解决方法

首先,即使在保持图像的纵横比的同时也可以实现您所需要的 – 但是行高将被计算,但并不是一件简单的任务(至少不如单行公式那么简单) ).

有一个我开发的名为jPictura的jQuery插件.我相信该插件完全符合您的需要.

Here is a working fiddle.

您可以在GitHub找到插件代码和文档.

简单的例子如何使用插件

$(document).ready(function () {
    $('#my-gallery').jpictura({
        layout: { itemSpacing: 0,justifyLastRow: true,idealRowHeight: 200}
    });
});

> itemSpacing – 图像之间的空间量,以像素为单位
> justifyLastRow – 如果为true,最后一行中的图像将被拉伸以占据行的全部宽度
> idealRowHeight – 行的所需高度(以像素为单位).该插件将尽力安排这些项目,使得行高度尽可能靠近该值.
>在GitHub上有更多的选项记录

除了计算图像的正确宽度和高度的JS内容之外,还有一件需要考虑的图像之间的空白空间.图像是默认的内嵌块,这意味着它们的行为就像单词和单词之间有一些空白的空间,对吧?使它们显示:block; float:left;或使用弹性框布局来摆脱空格.该插件使用float:left;默认.

原文链接:https://www.f2er.com/jquery/153249.html

猜你在找的jQuery相关文章