本文是关于Pinterest风格瀑布流无限加载PHP实现代码片段+JS代码片段。一段代码，它从数据库中获取您的文章，并以流行的Pinterest 网站瀑布流风格构建它们，瀑布流基于Bootstrap。
在 Bootstrap 中激活 DIV 块并启动 Masonry 标记。
<div class="grid" data-masonry='{"percentPosition": true }'>
这是用于构建网格的现成的HTML代码块的示例。
<div class="cb-content videolist">
<div class="grid" data-masonry='{"percentPosition": true }'>
<!--New block-->
<div class="col-lg-3 col-sm-6 newsfeed-post" style="padding-left: 5px;padding-right: 5px;">
<div class="newsfeed bg-white">
<div class="header-section d-flex">
<div class="left-cab">
<figure class="ava mr-0">
<a href="#" class="profile-detail-bttn"><img src="https://vuesite.cn/assets/images/ava2.png" class="rounded-circle" alt="image"></a>
</figure>
<h4>Edward Kelly</h4>
<span>2 hours ago</span>
</div>
<div class="right-cab text-right">
<a href="#" class="icon-bttn mt-1 actions-open" data-actions=".my-action"><i class="cv cvicon-cv-play-circle"></i></a>
</div>
</div>
<div class="content-section pt-2 pb-2">
<p class="mb-3 mt-1">Implementation of technologies to store unchangeable data based on specific.</p>
<a href="/newsfeed-post/" class="post-media"><img src="https://images.unsplash.com/photo-1606787364406-a3cdf06c6d0c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=Mnw4NjA4fDF8MXxhbGx8MXx8fHx8fDJ8fDE2MzA5NTYxMzQ&ixlib=rb-1.2.1&q=80&w=1080" alt="post" class="img-responsive"></a>
</div>
<div class="footer-section">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3"><a href="#"><i class="cv cvicon-cv-liked text-red"></i>1124</a></li>
<li class="list-inline-item"><a href="/comment/"><i class="cv cvicon-cv-view-stats"></i>77</a></li>
<li class="list-inline-item float-right"><a href="#" data-actions=".my-actions" class="actions-open"><i class="cv cvicon-cv-liked"></i>56</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 newsfeed-post" style="padding-left: 5px;padding-right: 5px;">
<div class="newsfeed bg-white">
<div class="header-section d-flex">
<div class="left-cab">
<figure class="ava mr-0">
<a href="#" class="profile-detail-bttn"><img src="https://vuesite.cn/assets/images/ava2.png" class="rounded-circle" alt="image"></a>
</figure>
<h4>Edward Kelly</h4>
<span>2 hours ago</span>
</div>
<div class="right-cab text-right">
<a href="#" class="icon-bttn mt-1 actions-open" data-actions=".my-action"><i class="cv cvicon-cv-play-circle"></i></a>
</div>
</div>
<div class="content-section pt-2 pb-2">
<p class="mb-3 mt-1">Implementation of technologies to store unchangeable data based on specific.</p>
<a href="/newsfeed-post/" class="post-media"><img src="https://images.unsplash.com/photo-1630794257929-9907faaab815?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=Mnw4NjA4fDB8MXxhbGx8N3x8fHx8fDJ8fDE2MzA5NTYxMzQ&ixlib=rb-1.2.1&q=80&w=1080" alt="post" class="img-responsive"></a>
</div>
<div class="footer-section">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3"><a href="#"><i class="cv cvicon-cv-liked text-red"></i>1124</a></li>
<li class="list-inline-item"><a href="/comment/"><i class="cv cvicon-cv-view-stats"></i>77</a></li>
<li class="list-inline-item float-right"><a href="#" data-actions=".my-actions" class="actions-open"><i class="cv cvicon-cv-liked"></i>56</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 newsfeed-post" style="padding-left: 5px;padding-right: 5px;">
<div class="newsfeed bg-white">
<div class="header-section d-flex">
<div class="left-cab">
<figure class="ava mr-0">
<a href="#" class="profile-detail-bttn"><img src="https://vuesite.cn/assets/images/ava2.png" class="rounded-circle" alt="image"></a>
</figure>
<h4>Edward Kelly</h4>
<span>2 hours ago</span>
</div>
<div class="right-cab text-right">
<a href="#" class="icon-bttn mt-1 actions-open" data-actions=".my-action"><i class="cv cvicon-cv-play-circle"></i></a>
</div>
</div>
<div class="content-section pt-2 pb-2">
<p class="mb-3 mt-1">Implementation of technologies to store unchangeable data based on specific.</p>
<a href="/newsfeed-post/" class="post-media"><img src="https://images.unsplash.com/photo-1630873292791-66937fdabdb8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=Mnw4NjA4fDB8MXxhbGx8MjN8fHx8fHwyfHwxNjMwOTU2NDA4&ixlib=rb-1.2.1&q=80&w=1080" alt="post" class="img-responsive"></a>
</div>
<div class="footer-section">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3"><a href="#"><i class="cv cvicon-cv-liked text-red"></i>1124</a></li>
<li class="list-inline-item"><a href="/comment/"><i class="cv cvicon-cv-view-stats"></i>77</a></li>
<li class="list-inline-item float-right"><a href="#" data-actions=".my-actions" class="actions-open"><i class="cv cvicon-cv-liked"></i>56</a></li>
</ul>
</div>
</div>
</div>
<div class="page-load-status">
<div class="loader-ellips infinite-scroll-request">
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
</div>
<p class="infinite-scroll-last">End of content</p>
<p class="infinite-scroll-error">No more pages to load</p>
</div>
</div>
</div>
<!-- .photo-item template HTML -->
<script type="text/html" id="photo-item-template">
<div class="col-lg-3 col-sm-6 newsfeed-post photo-item" style="padding-left: 5px;padding-right: 5px;">
<div class="newsfeed bg-white">
<div class="header-section d-flex">
<div class="left-cab">
<figure class="ava mr-0">
<a href="#" class="profile-detail-bttn"><img src="https://vuesite.cn/assets/images/ava2.png" class="rounded-circle" alt="image"></a>
</figure>
<h4>{{id}}</h4>
<span>{{id}}</span>
</div>
<div class="right-cab text-right">
<a href="#" class="icon-bttn mt-1 actions-open" data-actions=".my-action"><i class="cv cvicon-cv-play-circle"></i></a>
</div>
</div>
<div class="content-section pt-2 pb-2">
<p class="mb-3 mt-1">{{title}}</p>
<a href="/newsfeed-post/" class="post-media"><img src="https://vuesite.cn/{{image_default}}" alt="post" class="img-responsive"></a>
</div>
<div class="footer-section">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3"><a href="#"><i class="cv cvicon-cv-liked text-red"></i>1124</a></li>
<li class="list-inline-item"><a href="/comment/"><i class="cv cvicon-cv-view-stats"></i>77</a></li>
<li class="list-inline-item float-right"><a href="#" data-actions=".my-actions" class="actions-open"><i class="cv cvicon-cv-liked"></i>56</a></li>
</ul>
</div>
</div>
</div>
</script>
以下是向文件处理程序发出请求并显示块的 JS 脚本。
<script>
var $grid = $('.grid').masonry({
itemSelector: '.photo-item',
columnWidth: '.grid__col-sizer',
gutter: '.grid__gutter-sizer',
percentPosition: true,
stagger: 30,
// nicer reveal transition
visibleStyle: { transform: 'translateY(0)', opacity: 1 },
hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});
//------------------//
// Get an API key for your demos at https://unsplash.com/developers
var unsplashID = '9ad80b14098bcead9c7de952435e937cc3723ae61084ba8e729adb642daf0251';
// get Masonry instance
var msnry = $grid.data('masonry');
$grid.infiniteScroll({
path: function() {
return 'resr.php?limit=10&client_id='
+ unsplashID + '&page=' + this.pageIndex;
},
// load response as flat text
responseType: 'text',
outlayer: msnry,
status: '.page-load-status',
history: false,
});
$grid.on( 'load.infiniteScroll', function( event, response ) {
// console.log( response )
// parse response into JSON data
var data = JSON.parse( response );
// compile data into HTML
var itemsHTML = data.map( getItemHTML ).join('');
// convert HTML string into elements
var $items = $( itemsHTML );
// append item elements
$items.imagesLoaded( function() {
$grid.infiniteScroll( 'appendItems', $items )
.masonry( 'appended', $items );
})
});
// load initial page
$grid.infiniteScroll('loadNextPage');
//------------------//
var itemTemplateSrc = $('#photo-item-template').html();
function getItemHTML( photo ) {
return microTemplate( itemTemplateSrc, photo );
}
// micro templating, sort-of
function microTemplate( src, data ) {
// replace {{tags}} in source
return src.replace( /\{\{([\w\-_\.]+)\}\}/gi, function( match, key ) {
// walk through objects to get value
var value = data;
key.split('.').forEach( function( part ) {
value = value[ part ];
});
return value;
});
}
</script>
新建PHP文件resr.php，将以下内容加入到该文件
<?php
$host = 'хххххххх';
$db = 'хххххххх';
$user = 'хххххххх';
$pass = 'хххххххх';
$charset = 'utf8';
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$opt = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
];
$pdo = new PDO($dsn, $user, $pass, $opt);
$start = $_GET['page'];
$limit = $_GET['limit'];
$testst = $start * $limit;
$sth = $pdo->prepare("SELECT id, title, image_default FROM posts ORDER BY id DESC LIMIT $testst, 10");
$sth->execute();
$result = $sth->fetchAll();
echo json_encode($result);
?>
该PHP代码用于从数据库读取文章元数据，以 JSON格式输出。
<!-- Bootstrap core CSS -->
<link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src='https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js'></script>
<script src='https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js'></script>
原文链接：https://vuesite.cn/23207.html，转载请注明出处。