基于Jquery的瀑布流
-
- AJAX
-
-
-
-
-
-
- $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></li>
<li> $(function() {</li>
<li> var $container = $("#container");</li>
<li> $container.imagesLoaded(function() {</li>
<li> $container.masonry({</li>
<li> itemSelector: '.box',</li>
<li> isAnimated: true,</li>
<li> columnWidth:200,</li>
<li> gutterWidth:200,</li>
<li> // isFitWidth:true,//自适应宽度</li>
<li> isResizableL:true// 是否可调整大小</li>
<li> });</li>
<li> });</li>
<li> $container.infinitescroll({</li>
<li> navSelector: '#next-link',</li>
<li> nextSelector: '#next-link a',</li>
<li> itemSelector: '.box',</li>
<li> animate: true,</li>
<li> loading: {</li>
<li> msgText: "加载中...",</li>
<li> finishedMsg: '没有新数据了...',</li>
<li> img: 'http://xialei.test.com/img/loading.gif',</li>
<li> selector: '.loading'</li>
<li> },</li>
<li> localMode: true</li>
<li> }, function(newElements) {</li>
<li> console.dir(newElements)</li>
<li> var $newEle = $(newElements);</li>
<li> $newEle.imagesLoaded(function() {</li>
<li> $container.masonry('appended', $newEle, true);</li>
<li> });</li>
<li> });</li>
<li> });</li>
<li></script>
|
