Masonry.js unusual behavior only fixed after refreshing the page

Questions : Masonry.js unusual behavior only fixed after refreshing the page

444

This is a project built with laravel. I programming am using this plugin.

It allows me to build this layout:

This is the order in which the images Learning are being placed:

It´s build with images being Earhost inserted directly from the database:

<script _OFFSET);  src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
 (-SMALL     <div class="grid products-by-room" _left).offset  data-masonry='{ "itemSelector": arrowImgView.mas  ".grid-item"}' style="margin-top: (self.  8rem">
        @foreach ($rooms as equalTo  $room)
           <div make.right.  class="grid-item" data-category="{{ mas_top);  $room->data_category}}" ImgView.  style="border: 7px solid #fff">
      ReadIndicator           <a href="#zoomImg{{ _have  $room->id }}" data-bs-toggle="modal" .equalTo(  data-bs-target="#zoomImg{{ $room->id make.top  }}">
                   <div OFFSET);  class="img-wrapper">
                 (TINY_        <img src="{{ $room->img }}" .offset  alt="" class="img-fluid shade">
      mas_right)                       <div ImgView.  class="overlay">
                     Indicator        <i class="fa fa-search-plus Read  icon"></i>
                     _have    </div>
                   .equalTo(  </div>
               </a>
  make.left               <div class="text-left *make) {  mt-3 mb-5">
                   <p straintMaker  class="product-subtitle">{{ ^(MASCon  $room->name }}</p>
             onstraints:        <h4 mas_makeC  class="product-title">Shop the [_topTxtlbl   Look</h4>
                   <a (@(8));  class="product-price-link" equalTo  href="#getPriceByRoom{{ $room->id }}"  width.  data-bs-toggle="modal" make.height.  data-bs-target="#getPriceByRoom{{ (SMALL_OFFSET);  $room->id }}">get price</a>
 .offset                </div>
           (self.contentView)  </div>
       @endforeach
     .left.equalTo  </div>

Sometimes this happens and it is fixed most effective after refreshing the page:

Any ideas on how to avoid this wrong idea behaviour?

Total Answers 0

Top rated topics

JQuery: Regex to validate US postal doesn't work

Converting cgs to 'custom' units in Astropy

Problem with custom claims when Windows authentication is used

Add date format constraint to varchar attribut

MySQL - Get users who have NO orders in current month but don have in previous, in one request

Sorting a dataframe that has list in it

Match regex doesn't return matched group

CSS Issue with a button placement in a container

COUNT ROWS that ONLY CONTAIN numbers

Text generation

QPieSlice change label text color to white

Simple snake game in pygame movement limitation

Azure Devops - YAML Build Triggers Don't Work. Alternative?

Micronaut + Redis – Fails when there is more than one cache

Laravel convert strings to clickabe links

Reply keyboard markup php bot telegram

Reading large file with ijson and f.seek(0) taking too much time

How to Read and Save Messages in Telegram and then Send message Using Python

Ggplot won't apply alpha value to some data points

How to add zero-values when there is no data available? (Canvas.js)

What is necessary for a function to be able to take stacked NumPy arguments?

Capture two variables in liquid

Disable Android checkbox listener

Deciding on opencv version installed separately, except opencv that comes with ROS

Is there a way to have a stdarray the same size as MPI_Comm_size?

Javax.net.ssl.SSLHandshakeException on spring boot application

Can`t Load multiple select with different data in cascade select in z-song laravel-admin

Using Selenium in iframe: NoSuchElementException

Why do I get the error "Code uncompressed size is greater than max allowed size of 272629760" only for some deployment targets?

Android Tenjin SDK Integration

Qt: Method Only Works in Constructor

SAS: replicate rows and iterate over columns

Caused by: java.lang.IllegalArgumentException: The main resource set specified [....\tmp0\wtpwebapps\...] is not valid

Into&lt;SocketAddr&gt; for String

Writing a thread safe optimized Datastore class

Using ng2-tooltip-directive to achieve same elements show 2 tooltips

Use azure cli command to change the reference image of vmss and update the vm running under the vmss

Python: can a variable take two different strings?

A postback request to AEM gives response code as 204 No content

Pandas read in table without headers

Define a Pydantic (nested) model

Get last day of month :: Expression language evaluation error :${coord:dateOffset(${coord:endOfMonths(0)}, -1, 'DAY')}:

How to add trigger sequence used Oracle ADF

How to run arm64 baremetal hello world program on qemu?

Ansible check if value exists in dictionary list

Monitoring MySQL database running in AWS EC2 instance

How to use functions on remote machine with OpenSSH?

Adding comment to column when I create table in PostgreSQL?

Service Bus Connection String using the Azure.ServiceBus.Messaging C# SDK for SAS token

Catch URL with parameters or end of URL using regular expression

Top