同位素项目不显示正确

我试图让同位素插件在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>

我怎样才能正常显示同位素的项目？

来源

2012-09-06 Wouter Berkes

对于初学者来说，你并没有将你的.item div放到#container中，但是你已经把.item div放入了对方 - 嵌套它们！同位素的设置始终是一个包含许多.item div的#container。

<div id="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    // ... and so forth, whether hard-coded, or loaded dynamically 
</div>

来源

2012-09-06 16:45:57 Systembolaget

谢谢...但我确实把我的项目divs放入容器....我其实忘了正确关闭div！感谢您的帮助 –

好吧，很高兴它帮助您实现它。祝你网站好运。 – Systembolaget

同位素项目不显示正确

回答

相关问题