Блог

Я работаю над Angularjs с laravel, и эта страница содержит некоторые изображения, которые не равны по размеру. Поэтому я использую изотоп, но изображения в изотопе прекрасно работают в местной среде, но по мере производства их компоновка ухудшается.

Скажите мне, как это сделать правильно.

Вот мой html-код:

 <div class="gallery isotopeGallery clearfix" id="galleryContent">
                                <div class="clearfix">
                                    <div class="mx-sm-2 mx-auto media-coverage" data-aos-once="true" data-aos="zoom-in">
                                        <div data-src="{{ url('/web/assets/images/media/img1.jpg') }}" class="item aos-init aos-animate">
                                            <div class="img-box">
                                                <img src="{{ url('/web/assets/images/media/img1.jpg') }}" class="img-fluid grid-item--width2" />
                                            </div>
                                            <div class="overlay d-flex justify-content-center">
                                                <div class="icon">
                                                    <i class="icon-search"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div data-src="{{ url('/web/assets/images/media/img3.jpg') }}" class="item aos-init aos-animate">
                                            <div class="img-box">
                                                <img src="{{ url('/web/assets/images/media/img3.jpg') }}" class="img-fluid grid-item--width2" />
                                            </div>
                                            <div class="overlay d-flex justify-content-center">
                                                <div class="icon">
                                                    <i class="icon-search"></i>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div data-src="{{ url('/web/assets/images/media/img8.jpg') }}" class="item aos-init aos-animate">
                                            <div class="img-box">
                                                <img src="{{ url('/web/assets/images/media/img8.jpg') }}" class="img-fluid grid-item--width2" />
                                            </div>
                                            <div class="overlay d-flex justify-content-center">
                                                <div class="icon">
                                                    <i class="icon-search"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div data-src="{{ url('/web/assets/images/media/img7.jpg') }}" class="item aos-init aos-animate">
                                            <div class="img-box">
                                                <img src="{{ url('/web/assets/images/media/img7.jpg') }}" class="img-fluid grid-item--width2" />
                                            </div>
                                            <div class="overlay d-flex justify-content-center">
                                                <div class="icon">
                                                    <i class="icon-search"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div data-poster="https://imwoman.s3.ap-south-1.amazonaws.com/Video/mc-news-1-poster.PNG" data-html="#video1" class="item video-item aos-init aos-animate">
                                            <div class="img-box">
                                                <img src="https://imwoman.s3.ap-south-1.amazonaws.com/Video/mc-news-1-poster.PNG" class="img-fluid grid-item--width2" />
                                            </div>
                                            <div class="overlay d-flex justify-content-center" >
                                                <div class="icon">
                                                    <i class="icon-search"></i>
                                                </div>
                                            </div>
                                        </div> 

                                    </div>
                                </div>
                            </div>
 

А вот мой js-код:

  $mediaCoverageGrid = $('.media-coverage').isotope({
    // options
    itemSelector: '.item',
    masonry: {
        columnWidth: 100 / 3,
    },
    sortBy: 'random'
});
$mediaCoverageGrid.imagesLoaded().progress(function() {
    $mediaCoverageGrid.isotope('layout');
});