Masonry infinite-scroll MySQL php Pinterest style

A snippet of working php code that displays Pinterest-style posts from the database.

Masonry infinite-scroll MySQL php Pinterest style
Masonry infinite-scroll MySQL

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.

DEMO

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.



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.