locked
Masonry - Prepend RRS feed

Answers

  • User-832373396 posted

    Hi ThislsYusuf,

    How do I remove the empty space before the golden rectangle
    Also how do I make the red rectangles fixed

    After moving the color-gold div out of the grid div, it seems that everything is ok!

    <div class="grid-item color-gold" style="; left: 0px; top: 0px;"></div>
    <div class="grid" style="; height: 670px;">
    
      
      <div class="grid-item" style="; left: 0px; top: 134px;"></div>
      <div class="grid-item" style="; left: 174px; top: 134px;"></div>
      <div class="grid-item" style="; left: 0px; top: 268px;"></div>
      <div class="grid-item" style="; left: 174px; top: 268px;"></div>
      <div class="grid-item" style="; left: 0px; top: 402px;"></div>
      <div class="grid-item" style="; left: 174px; top: 402px;"></div>
      <div class="grid-item" style="; left: 0px; top: 536px;"></div>
    </div>
    

    Jolie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 6, 2018 2:08 AM

All replies

  • User-832373396 posted

    Hi Thisls,

    How do I make this masonry jquery code

    Sir, here is the full working code

    <!DOCTYPE html>
    <!-- saved from url=(0103)https://s.codepen.io/boomerang/iFrameKey-204bf510-7db8-c2c6-f435-ec4e18dfb17e/index.html?editors=1000#0 -->
    <html lang="en" class=""><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     
    
    
    
    <style class="cp-pen-styles">        .grid {
                background: #EEE;
                max-width: 1200px;
            }
     
            .grid-item {
                width: 160px;
                height: 120px;
                float: right;
                background: #D26;
                border: 2px solid #333;
                margin: 5px;
            }
    
            .color-gold {
                background-color: gold;
                color: yellow;
            }
    </style></head><body>
    <div class="grid" style="; height: 670px;"><div class="grid-item color-gold" style="; left: 0px; top: 0px;"></div>
      
      <div class="grid-item" style="; left: 0px; top: 134px;"></div>
      <div class="grid-item" style="; left: 174px; top: 134px;"></div>
      <div class="grid-item" style="; left: 0px; top: 268px;"></div>
      <div class="grid-item" style="; left: 174px; top: 268px;"></div>
      <div class="grid-item" style="; left: 0px; top: 402px;"></div>
      <div class="grid-item" style="; left: 174px; top: 402px;"></div>
      <div class="grid-item" style="; left: 0px; top: 536px;"></div>
    </div>
    
    <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"   ></script>
    
       <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
    <script> 
    
            var $grid = $('.grid').masonry({
                itemSelector: '.grid-item',
            }).masonry({ transitionDuration: '2.75s' });
    
            $(function () {
                var $items = $('.color-gold');
                $grid.prepend($items)
                .masonry('prepended', $items)
            })
    
     
     
    </script>
    </body></html>

    and we could test it at W3cshool online  https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default 

    Guide

    https://masonry.desandro.com/extras.html#requirejs 

    With regards, Angelina Jolie

    Monday, March 5, 2018 9:36 AM
  • User-829096311 posted

    Thanks for the reply
    Sorry, I had to explain more
    How do I remove the empty space before the golden rectangle
    Also how do I make the red rectangles fixed

    Monday, March 5, 2018 6:16 PM
  • User-832373396 posted

    Hi ThislsYusuf,

    How do I remove the empty space before the golden rectangle
    Also how do I make the red rectangles fixed

    After moving the color-gold div out of the grid div, it seems that everything is ok!

    <div class="grid-item color-gold" style="; left: 0px; top: 0px;"></div>
    <div class="grid" style="; height: 670px;">
    
      
      <div class="grid-item" style="; left: 0px; top: 134px;"></div>
      <div class="grid-item" style="; left: 174px; top: 134px;"></div>
      <div class="grid-item" style="; left: 0px; top: 268px;"></div>
      <div class="grid-item" style="; left: 174px; top: 268px;"></div>
      <div class="grid-item" style="; left: 0px; top: 402px;"></div>
      <div class="grid-item" style="; left: 174px; top: 402px;"></div>
      <div class="grid-item" style="; left: 0px; top: 536px;"></div>
    </div>
    

    Jolie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 6, 2018 2:08 AM