我是编码的初学者,我在这里报名只是为了问这个问题。我想知道是否有人可以指出正确的方向或帮助我解决此代码。首先,我的目标是创建一个艺术作品集,以3x3格式显示我的作品,该格式基本上与Instagram相同。
因此,在过去的几周中,我与导师一起做了很多修改,起初,他告诉我仅使用JavaScript以3x3格式显示图像。之后,我被告知要学习有关JSON的更多信息,以及如何像以前一样将图像存储在JSON对象中并在3x3对象中显示。最初,JavaScript效果很好,但后来他告诉我使用JSON对其进行更改后,我的图像不再显示相同的图像。现在它们垂直堆叠在一起,不再是3x3。我一直在将代码与旧文件进行比较,而最新的文件仍然垂直堆叠...
我当前的JS代码:
var data = {
"images": [{
"img": "img/balloon.jpg",
"id": "balloon"
},
{
"img": "img/cate.jpg",
"id": "cate"
},
{
"img": "img/dragon.jpg",
"id": "dragon"
},
{
"img": "img/Groot.jpg",
"id": "groot"
},
{
"img": "img/flareon.jpg",
"id": "flareon"
},
{
"img": "img/forest.jpg",
"id": "forest"
},
{
"img": "img/fox.jpg",
"id": "fox"
},
{
"img": "img/glaceon.jpg",
"id": "glaceon"
},
{
"img": "img/majora.jpg",
"id": "majora"
},
] };
<!DOCTYPE html>
<html>
<head>
<title> Art Gallery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<header>
<center>
<div class="banner">
<div class="centered-text"> My Art Gallery</div>
</div>
</center>
</header>
<body>
<script>
var fs = require('./img');
var files = fs.readdirSync('./img');
function myMessage() {
if (files == null) {
return " sorry something went wrong ";
} else {
// print files
}
}
</script>
<script>
document.write(myMessage());
</script>
<p>
<div class="tn-container tn left">
<div id="profile-picture">
<script>
var myProfile = document.createElement("img");
myProfile.setAttribute("src", "img/Me1.jpg");
document.getElementById("profile-picture").prepend(myProfile);
</script>
</div>
<p>
<div class="block_1 hline-bottom "></div>
</p>
</div>
</p>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="art" id="images"></div>
</div>
<div class=" col-md-4 col-sm-6 col-xs-12">
<div class="art" id="images"></div>
</div>
<div class=" col-md-4 col-sm-6 col-xs-12">
<div class="art" id="images"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="art" id="images"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="art" id="images"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="art" id="images"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="art" id="images"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="art" id="images"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="art" id="images"></div>
</div>
</div>
</div>
</html>
<script type="text/javascript " src="script.js "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
data.images.forEach(function(obj) {
var img = new Image();
img.src = obj.img;
img.setAttribute("class", "art");
document.getElementById("images").appendChild(img);
如您所见,我一直在使用容器和行将其格式设置为3x3。直到我开始将图像插入JSON对象之前,一切都很好。图像显示不错,但现在它们是垂直堆叠的。我只想要3x3,就像以前一样:/
这是我第一次在此处发布关于Stack Overflow的文章,因此,如果我的问题不清楚或我的代码没有正确显示,我向您道歉。我也可以发布旧文件进行比较
答案 0 :(得分:1)
首先,fs
和require
是Node.js
模块,这意味着它们存在于服务器上,而不是在客户端(即HTML网页)上未定义。试图将该代码包含在HTML <script>
标签中将无法正常工作。对于您的情况,我建议删除顶部的两个<script>
块,因为它们什么也不会做,只能在页面顶部写上“对不起问题”。
对于图像“堆叠”的问题,这是因为您试图写入具有相同id
值的多个HTML元素。 id
对于页面上的每个元素必须唯一。如果您尝试为多个事物分配相同的id
,则通常只有具有该ID的第一个元素才有效,因为document.getElementById
将在第一个匹配项后停止搜索。即使这种行为也不一定得到保证。永远不要给多个元素相同的id
。
要解决此问题,您可以更改id
元素的<div>
值,以使图像与JSON数据的id属性完全匹配,并更改{{1 }}到document.getElementById("images")
。
请注意,这不是一个很好的解决方案,因为它通过要求数据文件确切知道页面上的document.getElementById(obj.id)
值来将数据与网页的布局联系起来。建议您查找并学习如何使用id
或document.getElementsByName()
。
答案 1 :(得分:0)
注意::我对JavaScript的了解不是很好,所以这个答案可能不是最好的答案,但是它可以达到预期的效果。
//here's your JSON
var data = [{
"img": "https://s3.amazonaws.com/uifaces/faces/twitter/abinav_t/128.jpg",
"id": "balloon"
},
{
"img": "https://s3.amazonaws.com/uifaces/faces/twitter/ritu/128.jpg",
"id": "cate"
},
{
"img": "https://s3.amazonaws.com/uifaces/faces/twitter/zeldman/128.jpg",
"id": "dragon"
},
{
"img": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg",
"id": "groot"
},
{
"img": "https://s3.amazonaws.com/uifaces/faces/twitter/abinav_t/128.jpg",
"id": "flareon"
},
{
"img": "https://s3.amazonaws.com/uifaces/faces/twitter/ritu/128.jpg",
"id": "forest"
},
{
"img": "https://s3.amazonaws.com/uifaces/faces/twitter/zeldman/128.jpg",
"id": "fox"
},
{
"img": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg",
"id": "glaceon"
},
{
"img": "https://s3.amazonaws.com/uifaces/faces/twitter/abinav_t/128.jpg",
"id": "majora"
},
];
//variable to keep a track of the image no.
var i=0;
//looping through each "col-sm-4" to add the images
data.forEach(function(item) {
document.getElementsByClassName("col-sm-4")[i].innerHTML="<img src='"+item.img+"'/>";
i++;
});
.col-sm-4 {
border: 3px solid white;
padding: 0;
}
img {
width: 100%;
}
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
</div>