jquery implémente l'effet de flux en cascade Sharing_jquery

Utilisez jquery pour obtenir l'effet de flux en cascade. Veuillez l'utiliser comme référence. Vous pouvez voir l'effet après l'exécution. L'introduction JQ dans le code doit être remplacée par la vôtre

Copier le code Le code est le suivant :

< style>
#container {
width: 90%;
margin: 80px auto;
}
.box {

box-shadow : 0 0 4px #999 ;
margin-top : 40px;
padding : 40px;
font-family : "Century Gothic", "Microsoft YaHei ", Arial, monospace;
}
.loading {
text-align: center;
}


< body>

$page = isset($_GET['page']) intval($_GET['page']) : 1;
$size = 20;
try
{
$pdo = new PDO('mysql:host=localhost;dbname=wechatbook', 'root', 'root');
$offset = ($page - 1) * $size;
$sql = "SELECT title FROM wcb_rss_news limit $offset,$size";
$stmt = $pdo->query($sql);
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$list = $stmt->fetchAll();
if (!empty($list))
{
foreach ($list as $row)
{
?>

}
}
else
{
echo '';
}
}
catch (PDOException $e)
{
}
?>

Page suivante

<script><br> $(function() { <br> var $container = $("#container");<br> $container.imagesLoaded(function() {<br> $container.masonry({<br> itemSelector: '.box',<br> isAnimated : true ,<br> columnWidth:200,<br> gutterWidth:200,<br> // isFitWidth:true,//largeur adaptative<br> isResizingL:true//s'il peut être redimensionné<br> });<br> });<br> $container.infinitescroll({<br> navSelector : '#next-link',<br> nextSelector : '#next-link a',<br> itemSelector : '.box',<br> animate : true,<br> chargement : {<br> msgText : "Chargement...",<br>finishedMsg : "Aucune nouvelle donnée...",<br> img : "http://www.jb51. ne/img/loading.gif',<br> sélecteur : '.loading'<br> },<br> localMode : true<br> }, function(newElements) {<br> console.dir( newElements)<br> var $newEle = $(newElements);<br> $newEle.imagesLoaded(function() {<br> $container.masonry('appended', $newEle, true);<br> }); );<br> });<br></script>