我正在尝试让同位素插件在http://www.kindervakantiepas.nl/isotope工作
我没有一个漂亮的砖石网格....
这是我使用的代码index.php
:
<style type="text/css">
/**** Isotope Filtering ****/
#container {
/* either of these will work for horizontal Isotope layouts */
height: 480px;
}
.item{
background-color:#33FF00;
width:200px;
height:200px;
margin:10px;
}
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jquery.isotope.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#container').isotope({
//options
itemSelector : '.item',
layoutMode : 'masonry'
});
});
</script>
</head>
<body>
<div id="container">
<?php
include('config.php');
$conn=new mysqli($hostname,$username,$password,$database) or die ('cannot open database');
$sql='SELECT naamAanbieder FROM activiteit LIMIT 100';
$result = $conn->query($sql) or die (mysqli_error($conn));
while ($row = $result->fetch_assoc()) {
$naamAanbieder = $row['naamAanbieder'];
echo "<div class='item'>" .$naamAanbieder ."<div>";
};
?>
</div>
</body>
</html>
如何正确显示同位素项目?