Masonry infinite-scroll MySQL php Pinterest style
A snippet of working php code that displays Pinterest-style posts from the database.
Super
0
658
A snippet of code that fetches your posts from the database and builds them in the style of the popular Pinterest site. Masonry comes from Bootstrap.
Activate the DIV block in Bootstrap and launch the Masonry markup.
<div class="grid" data-masonry='{"percentPosition": true }'>This is an example of ready-made, working HTML blocks for building a grid.
<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://nullradar.xyz/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://nullradar.xyz/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://nullradar.xyz/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://nullradar.xyz/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://proweblab.xyz/{{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 that makes a request to a file handler and displays blocks.
<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>resr.php create this file and add the php script you will see below.
<?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);
?>
This script creates JSON output from the database.
<!-- Bootstrap core CSS -->
<link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src='https://unpkg.com/[email protected]/dist/infinite-scroll.pkgd.js'></script>
<script src='https://unpkg.com/[email protected]/dist/masonry.pkgd.js'></script>If you have any questions or need some files, write in the comments below.
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
