Question

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

如何正确显示Isotope项目？

Answer 1

嗯，对于初学者来说，你没有把你的.item div放到#container中，但你把.item div放在彼此里面 - 嵌套它们！ Isotope的设置总是一个#container，里面有很多.item div。

<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>

同位素项目无法正确显示

1 个答案: