Question

我是网络开发的新手。我想以网格布局显示图像。我的图像宽度相同但高度不同。为了显示它们之间没有间隙的图像，我使用了砌体插件。但它对我不起作用。任何人都可以帮我找出错误..

这是我的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>FlashTemplatesDesign </title>
<script type="text/javascript" src="lib/jquery.tools.js"></script>  
<script type="text/javascript" src="lib/masonry.pkgd.min.js"></script>

<script>
var container = document.querySelector('#test');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.imagedisplay'
});
</script>

</head>

<body>
<div id="test">

<?php 
 // Connects to your Database 
 mysql_connect("localhost", "root", "") or die(mysql_error()) ; 
 mysql_select_db("selfie") or die(mysql_error()) ; 

 //Retrieves data from MySQL 
 $data = mysql_query("SELECT * FROM image_upload INNER JOIN user_table
ON image_upload.user_id=user_table.user_id  ORDER BY timestamp DESC; ") or           die(mysql_error());


    //Puts it into an array

 while($info = mysql_fetch_array($data)){
 //Outputs the image and other data 
 Echo

 '<div class="imagedisplay">' .'<img src="uploads/'.$info['image'].'" width="230px"     height=auto border="1px solid #"
-webkit-border-radius=" 20px"
-moz-border-radius= "20px"
border-radius="20px"  
   >'. '</div>';

   }

 ?>  
 </div>
 </body>
 </html>

Answer 1

在文档加载之前，您似乎正试图在JavaScript中引用图像和容器。尝试在结束</body>标记之后（或之前）使用代码移动脚本标记。

由于文档没有完全加载，如果您的JavaScript处于首位，JavaScript中的DOM API仍然无法访问这些元素。

Answer 2

在使用砌体组织元素之前，您需要等待图像加载。

From masonry appendix:

// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
  msnry = new Masonry( container );
});

使用砖石显示图像

2 个答案: