我有一堆想使用 jquery 显示的图像。我有 div,我使用 jquery 根据一些 node_id 标准填充 div。例如,如果 node_id 是 teamA,我会显示在图像名称中包含 teamA 文本的图像。
它的工作原理发现,问题是当将图像放在 html 的主体上时,图像会垂直显示,直到主页上没有空间。
我想根据浏览器窗口的大小执行此操作,根据浏览器窗口的大小显示图像。例如,如果图像大小为 500x500,浏览器窗口宽度为 700,我应该能够每行显示一张图像。如果浏览器的宽度是 1200,我的浏览器窗口中每行应该有 2 张图像。
为了给你一个想法,我放了 html 和 jquery 代码来向你展示我在做什么:
<div class="tab-content" id="tabs1">
<div id="team_A" class="team"></div>
<div id="team_B" class="team"></div>
<div id="team_C" class="team"></div>
<div id="team_D" class="team"></div>
</div>
这是基于 jstree node_id 显示图像的 jquery 代码:
var team_A_Img = "http://test.net" + node_id + "-team_A.png";
$(function () {
var myImage = new Image();
$(myImage).load(function () {
$("#team_A").html(myImage);
}).error(function () {
$('#team_A').hide();
}).attr('src', Img_A_Img)
});
这很有效,但是我需要根据浏览器上的空间大小,垂直或水平地显示基于浏览器窗口大小的图像。有人可以给我一些想法,我将如何做到这一点?