如何解决同位素布局在生产模式下无法正常工作
我正在使用 laravel 处理 Angularjs,此页面包含一些大小不等的图像。所以我使用同位素,但同位素图像在本地环境中工作正常,但随着生产的进行,其布局会恶化。
告诉我如何正确操作。
这是我的 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');
});
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com(将#修改为@)