Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Masonry with Lazyloaded images">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masonry with Lazyloaded images</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #tocDiv {
            position: sticky;
            top: 20px; /* Adjust this value as needed */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row my-5">
            <div class="col-md-8">
                <article class="blog-post">
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel libero at lectus rutrum vestibulum vitae ut turpis. Ut ultricies purus sed justo luctus, ut tincidunt dui volutpat. Vivamus non turpis accumsan, consequat magna eu, venenatis risus.</p>
                    <p>More content goes here...</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel libero at lectus rutrum vestibulum vitae ut turpis. Ut ultricies purus sed justo luctus, ut tincidunt dui volutpat. Vivamus non turpis accumsan, consequat magna eu, venenatis risus.</p>
                    <p>More content goes here...</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel libero at lectus rutrum vestibulum vitae ut turpis. Ut ultricies purus sed justo luctus, ut tincidunt dui volutpat. Vivamus non turpis accumsan, consequat magna eu, venenatis risus.</p>
                    <p>More content goes here...</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel libero at lectus rutrum vestibulum vitae ut turpis. Ut ultricies purus sed justo luctus, ut tincidunt dui volutpat. Vivamus non turpis accumsan, consequat magna eu, venenatis risus.</p>
                    <p>More content goes here...</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel libero at lectus rutrum vestibulum vitae ut turpis. Ut ultricies purus sed justo luctus, ut tincidunt dui volutpat. Vivamus non turpis accumsan, consequat magna eu, venenatis risus.</p>
                    <p>More content goes here...</p>
                  
                      
                <h1>Masonry with Lazyloaded images </h1>
                  
                 
                  
                  <div class="row masonry-grid"  data-masonry='{"percentPosition": true }'>
                    
                    
                  <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/500/300" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/544/876" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/999/321" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/640/789" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/1200/888" class="lazyload img-fluid" /></div>   
                    
                    <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/745/321" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/890/556" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/1200/777" class="lazyload img-fluid" /></div> 
                    
                                      <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/500/300" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/789/987" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/1900/454" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/465/456" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/1200/888" class="lazyload img-fluid" /></div>   
                    
                    <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/745/321" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/890/556" class="lazyload img-fluid" /></div>   
                    
                     <div class="col-md-4 col-sm-6 grid-item"><img data-sizes="auto" data-src="https://picsum.photos/1200/777" class="lazyload img-fluid" /></div> 
                    
                  </div>       
                  
                  
                  
                         
                </article>
            </div>
​
            <div class="col-md-4">
                <div class="lh-lg p-4 mb-3 bg-light rounded" id="tocDiv">
                    <small>Table of Content</small>
                    <ul>
                        <li><a href="#section1">Section 1</a></li>
                        <li><a href="#section2">Section 2</a></li>
                        <li><a href="#section3">Section 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
​
 
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
  
  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" integrity="sha512-q583ppKrCRc7N5O0n2nzUiJ+suUv7Et1JGels4bXOaMFQcamPk9HjdUknZuuFjBNs7tsMuadge5k9RzdmO+1GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.min.js" integrity="sha512-kfs3Dt9u9YcOiIt4rNcPUzdyNNO9sVGQPiZsub7ywg6lRW5KuK1m145ImrFHe3LMWXHndoKo2YRXWy8rnOcSKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
  <style>
    
    .col-md-4 {margin-bottom:30px}
    
  </style>
  
  <script>
    
    
    
​
/******  fix images with masonry with autoload ******/
​
document.addEventListener("DOMContentLoaded", function () {
  var grid = document.querySelector('.masonry-grid');
​
  if (grid) {
    var msnry = new Masonry(grid, {
      itemSelector: '.grid-item',
      percentPosition: true
    });
​
    // Initialize Masonry immediately
    msnry.layout();
​
    // Re-layout Masonry when each image is lazy-loaded
    grid.addEventListener('lazyloaded', function () {
      msnry.layout();
    });
  }
});
​
/******  fix images with masonry with autoload ******/
  </script>
  
</body>
</html>
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
greenmindagencypro
0viewers