1

我希望根据图像尺寸将图像放置在 div 中。例如：

  • Div1：任何宽度> 600的图像都放在这里。

  • Div2：任何高度> 800的图像都放在这里。

  • img1 尺寸 = 宽度：601 像素；高度：300px；将此图像放在 Div1 上。

  • img2 尺寸 = 宽度：400 像素；高度：850px；将此图像放在 Div2 中。

我怎样才能使用 javascript 做到这一点？

这就是我试图做到的方式。

#Div1{
    width:600px;
    height:auto;
}
#Div2{
    width:auto;
    height:600px;
}

var imageUrl = new Array();
    imageUrl[2] = '<img id="checkfunctionfirst" src="img1.jpg">'
    imageUrl[3] = '<img id="checkfunctionfirst" src="img2.jpg">'
    imageUrl[5] = '<img id="checkfunctionfirst" src="img3.jpg">'

function checkfunctionfirst () {

    for(i=0;i<=imageUrl.length;i++){
        if(imageUrl[i].width>600){
            //place this image on Div1
        } 
        if(imageUrl[i].height>800){
            //place this image on Div2
        }

    }    
}

谢谢

4

3 回答 3

2

您的代码示例存在许多问题和疑问，因此很难指出从哪里开始以及要更改的内容。但我会给你一个例子，说明你的代码如何工作，我希望它会有所帮助：

var imageUrl = ['img1.jpg','img2.jpg','img3.jpg'], // the images to use
    i = 0, len = imageUrl.length, img; // some vars used later

for( ; i<len; i++ ) { // loop through the image URLs

    img = new Image(); // create a new image

    img.onload = function() { // you need this to get the width/height

        if ( this.height > 800 ) { // "this" is the Image element
            document.getElementById('Div2').appendChild(this); // append to to the div
        } else if ( this.width > 600 ) {
            document.getElementById('Div1').appendChild(this);
        }
    };
    img.src = imageUrl[i]; // give the Image element a source
}
于 2012-11-06T16:20:07.850 回答
0

很高兴看到您尝试在没有 jquery 或任何其他插件的情况下自己做事。你是男人！

首先，我应该说，对于每个图像元素，您应该等到图像加载后才能找出该元素的尺寸。我认为你应该"onload"用javascript处理事件。只要图像完全加载，它就会触发。如果你有静态尺寸，你应该在每个元素的属性中设置它们"width"和"height"属性。"style""img"

在您拥有所有维度之后，我相信您的代码似乎没问题，您应该使用该"appendChild"方法将元素附加"img"到"div"元素。

干杯

于 2012-11-06T16:18:57.893 回答
0

好的，如果图像符合条件，则将图像标签添加到字符串的末尾...

var div1Cont = "";
if(imageUrl[i].width>600){
    div1Cont += imgUrl[i];
}

然后在 for 语句之后，将该字符串放在您的 div 中。

document.getElementById("Div1").innerHTML = div1Cont;

然后与您的 div 2 类似。

于 2012-11-06T16:18:29.240 回答