Изотопы не отображаются должным образом

Я пытаюсь заставить работать плагин изотопов по адресу 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>

Как я могу правильно отображать элементы изотопов?


jquery jquery-isotope
person Wouter Berkes    schedule 06.09.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ну, во-первых, вы не поместили свои элементы div .item в #container, а поместили элементы div .item друг в друга — вложив их друг в друга! Установка Isotope всегда представляет собой #container со множеством div-элементов .item внутри.

<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>
person Systembolaget    schedule 06.09.2012
comment
Спасибо ... но я поместил свои элементы div в контейнер .... Я действительно забыл правильно закрыть div !! Спасибо за вашу помощь - person Wouter Berkes; 07.09.2012
comment
Что ж, рад, что помог тебе это осознать. Удачи с вашим сайтом. - person Systembolaget; 07.09.2012