Jquery ベースのディストリビューション
-
- AJAX
-
- <スクリプト src="js/jquery.infinitescroll.min.js">
-
- #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 = 新しい 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)
- {
- ?> ;
-
= $row['title'] ?>
- }
- }
- else
- {
- echo '';
- }
- }
- catch (PDOException $e)
- {
- }
- ?>
- $(function() {
- var $container = $("#container");
- $container.imagesLoaded(function() {
- $container.masonry({
- itemSelector: '.box',
- isAnimated: true,
- columnWidth:200,
- gutterWidth:200,
- / / isFitWidth:true,//自适应宽度
- isResizableL:true// かどうか调整大小
- });
- });
- $container.infinitescroll({
- navSelector: '#next-link',
- nextSelector: '# next-link a',
- itemSelector: '.box',
- animate: true,
- reading: {
- msgText: "加ダウンロード中...",
- completedMsg: '没有新数据了...',
- img: 'http://xialei.test.com/img/loading.gif',
- セレクター: '.loading'
- },
- localMode: true
- }, function(newElements) {
- console.dir(newElements)
- var $ newEle = $(newElements);
- $newEle.imagesLoaded(function() {
- $container.masonry('appended', $newEle, true);
- });
- });
- });
|