jquery はウォーターフォール フロー効果を実装します。

ウォーターフォール フロー効果を実現するには、参考として使用してください。コード内の JQ の導入部分は、独自の

コードをコピーします コードは次のとおりです:

<スクリプト src="js/jquery-1.8.1.min.js">
<スクリプト src ="js/jquery.masonry .min.js">

< 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、等幅;
}
.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 = "wcb_rss_news 制限 $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,//適応幅<br> isResizableL:true// サイズ変更可能かどうか<br> });<br> });<br> $container.infinitescroll({<br> navSelector: '#next-link',<br> nextSelector: '#next-link a',<br> itemSelector: '.box',<br> animate: true,<br> reading: {<br> msgText: "Loading...",<br> completedMsg: '新しいデータはありません...',<br> img: 'http:// www.jb51. ne/img/loading.gif',<br> セレクター: '.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>