jquery implémente l'effet de flux en cascade Sharing_jquery
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)
{
}
?>
<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>