简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Backend Development > PHP Tutorial > body text

Waterfall flow based on Jquery

WBOY
Release： 2016-07-25 08:48:27
Original
1172 people have browsed it
基于Jquery的瀑布流
  5. AJAX
  14. $page = isset($_GET['page']) ? intval($_GET['page']) : 1;
  15. $size = 20;
  16. try
  17. {
  18. $pdo = new PDO('mysql:host=localhost;dbname=wechatbook', 'root', 'root');
  19. $offset = ($page - 1) * $size;
  20. $sql = "SELECT title FROM wcb_rss_news limit $offset,$size";
  21. $stmt = $pdo->query($sql);
  22. $stmt->setFetchMode(PDO::FETCH_ASSOC);
  23. $list = $stmt->fetchAll();
  24. if (!empty($list))
  25. {
  26. foreach ($list as $row)
  27. {
  28. ?>
  30. }
  31. }
  32. else
  33. {
  34. echo '';
  35. }
  36. }
  37. catch (PDOException $e)
  38. {
  39. }
  40. ?>
  • <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>
  • 复制代码


    Related labels：
    基于Jquery的瀑布流
    source：php.cn
    Previous article：Find whether two numbers are mutually prime (coprime) Next article：Use curl and regular expressions to crawl web data
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    Html code automatically fixed on staging but not on production I have a website built on Hugo and while implementing new functionality I made a mistake b...
    From 2023-09-15 22:46:29
    0
    1
    670
    CSS Grid: Create new row when child content overflows column width I have a two column layout based on CSS grid. When the content of the second column exceed...
    From 2023-09-05 15:18:28
    0
    1
    240
    How to use script tags to introduce the opensea-js library in pure HTML/JS? I want to use opensea-js in my html/js project, but their source code is only published on...
    From 2023-09-02 16:44:01
    0
    1
    280
    HTML table sorting So basically I'm running a mysql query that fetches data from my database and displays it ...
    From 2023-08-27 15:36:19
    0
    2
    259
    Center flex items in a container when surrounded by other flex items I have a flexbox (see code snippet below as an example). I want to set it up so that in al...
    From 2023-08-25 14:40:25
    0
    2
    214
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！