同位素項目不顯示正確

我試圖讓同位素插件在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

同位素項目不顯示正確

回答

相關問題