随机排列照片,以便 [英] Arranging Images Randomly In Order
本文介绍了随机排列照片,以便的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有各种尺寸图像的名单,我必须把他们都显示在一个页面。欲安排他们在没有空格显示在ONELINE图像和下一行的图像之间的方式。反正我可以做到这一点使用CSS和Javascript,??
I have a list of images with various sizes and I have to show them all in a page. I want to arrange them in such a way that no white spaces are shown between images on oneline and the image on the next line. Anyways I can achieve this using CSS and Javascript, ??
以下是对的jsfiddle的例子。
Following is the example on jsFiddle.
推荐答案
如果你愿意有自己的设计相互重叠,你可以让他们之间的最小差距使用客户端code动态定位的项目:
If you're willing to have the images overlap each other you can have minimum gap between them using client side code to position the items dynamically:
window.onload = function() {
var oList = document.getElementById("liParent")
var arrItems = oList.getElementsByTagName("li");
var totalWidth = parseInt(oList.style.width, 10);
var curLeft = 0;
var curTop = 0;
var arrHeights = new Array();
var colIndex = 0;
for (var i = 0; i < arrItems.length; i++) {
var oCurItem = arrItems[i];
var oImage = oCurItem.getElementsByTagName("img")[0];
oCurItem.style.position = "absolute";
var curWidth = oImage.offsetWidth;
var curHeight = oImage.offsetHeight;
if (curLeft + curWidth > totalWidth) {
curLeft = 0;
colIndex = 0;
}
if (colIndex < arrHeights.length)
curTop = arrHeights[colIndex];
oCurItem.style.left = curLeft + "px";
oCurItem.style.top = curTop + "px";
arrHeights[colIndex] = (curHeight + curTop);
curLeft += curWidth;
colIndex++;
}
}
更新的jsfiddle: http://jsfiddle.net/zHxPT/2/
这篇关于随机排列照片,以便的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文