javascript - 尝试使图像在同位素中按顺序加载和显示

标签 javascript jquery css jquery-isotope

我花了 2 天时间阅读我能找到的所有代码，但找不到解决方案并将其应用于我的情况。我希望有人能提供帮助。

我有一系列产品/盒子(包含图像、文字等)，我使用 php(从数据库)动态加载到同位素容器中。每个产品/盒子在 ul 同位素盒子中都是它自己的 li。

我希望整个同位素容器为 3 列宽(除非发生调整大小)。

我的问题是，在页面加载时，所有框最初都只加载到 1 列(这需要很长时间，因为必须加载每个图像)，直到所有框都加载(即加载所有图像)，然后是同位素容器可以布局一切。

用户必须等待很长时间，所以我希望每个盒子按顺序加载到容器中填充第 1 行(第 1 列，然后是第 2 列，然后是第 3 列)，然后继续填充第 2 行(第 1 列等)等等，这样箱子/产品就可以加载到页面下方，折叠起来对用户来说是未知的。因此，我也在尝试使用 imagesLoaded。我所做的一切都不起作用。

有 3 个代码组件 - 1. CSS，2. PHP/HTML，3. JS。我的如下:

$(window).load(function(){
		
	var $container = $('#filter-container');
	$container.imagesLoaded(function(){
		$container.isotope({
			itemSelector: 'li',
			filter: '*',
			resizable: false,
			columnWidth: 300,
			animationEngine: 'best-available'
		});
		
		var $tour = $('#filter-container.li');
		$container.append($tour).isotope('appended',$tour);
	});
	
		
	// filter buttons
		
	$('#filter-buttons a').click(function(){
	
		// select current
		var $optionSet = $(this).parents('#filter-buttons');
	    $optionSet.find('.selected').removeClass('selected');
	    $(this).addClass('selected');
    
		var selector = $(this).attr('data-filter');
		$container.isotope({ filter: selector });
		return false;
	});
   
  	//##########################################
	// Resize event
	//##########################################
	
	$(window).resize(function() {
		
		var w = $(window).width();
		//console.log(w);
	
		$container_home.isotope('reLayout');
	
	}).trigger("resize");
  
});
#filter-buttons {
  text-align: center;
  background: url(../img/filter.png) no-repeat top center;
  height: 47px;
  margin-bottom: 20px;
}
#filter-buttons li {
  display: inline-block;
  margin-bottom: 0px;
}
#filter-buttons li a {
  display: block;
  text-decoration: none;
  margin-bottom: 0px;
  margin-right: 5px;
  line-height: 47px;
  color: #cb5432;
}
#filter-buttons li .selected {
  background: url(../img/filter-arrow.png) no-repeat center top;
}
.cf:after,
.cf:before {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  zoom: 1;
}
.wrapper {
  margin: 0 auto;
  width: 100%;
  position: relative;
}
#filter-buttons {
  text-align: center;
  background: url(../img/filter.png) no-repeat top center;
  height: 47px;
  margin-bottom: 20px;
}
#filter-buttons li {
  display: inline-block;
  margin-bottom: 0px;
}
#filter-buttons li a {
  display: block;
  text-decoration: none;
  margin-bottom: 0px;
  margin-right: 5px;
  line-height: 47px;
  color: #cb5432;
}
#filter-buttons li .selected {
  background: url(../img/filter-arrow.png) no-repeat center top;
}
.cf:after,
.cf:before {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  zoom: 1;
}
.wrapper {
  margin: 0 auto;
  width: 100%;
  position: relative;
}
.ribbon {
    position: absolute;
    right: -8px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 100px;
    height: 100px;
    text-align: right;
}		
.ribbon span {
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    /* text-transform: uppercase; */
    text-align: center;
    line-height: 26px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 115px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#F70505 0%, #8F0808 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 20px;
    right: -26px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F0808;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F0808;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}
/*RAF */
div .raf {
    width: 40px;
    height: 36px;
    border-radius: 20%;
    margin-left: 4px;
    margin-top: -7px;
    background-image: url("//eternalcitytours.com/assets/ico/android-icon-36x36.png");
}
.feature {
  width: 1000px;
  margin-left: -65px;
  list-style-type:none
}
.feature li {
  position: relative;
  background: #f3e4c8;
  width: 30%;
  margin-bottom: 50px;
  margin-left: 20px;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
}
.feature li .thumb {
  display: block;
  margin: 10px;
  width: 280px;
}
.feature li .thumb img {
  max-width: 100%;
}
.feature li .caption {
  padding: 10px 10px 20px 10px;
  text-align: center;
}
.feature li a{
  color: #cb5432;
}
.feature li .thumb {
  position: relative;
}
.feature li .thumb .date {
  position: absolute;
  bottom: -25px;
  left: 110px;
  display: block;
  -moz-border-radius: 40px 40px 40px 40px;
  -webkit-border-radius: 40px 40px 40px 40px;
  border-radius: 40px 40px 40px 40px;
  height: 50px;
  width: 46px;
  background: #f3e4c8;
  float: left;
  font-family: mensch;
  padding-top: 10px;
}
.feature li .thumb .date span {
  display: block;
  text-align: center;
  font-size: 20px;
  line-height: 20px;
}
<div class="wrapper">
<ul id="filter-buttons">
				<li><a href="#" data-filter="*" class="selected">All Tours | </a></li>
				<li><a href="#" data-filter=".Top">Top Tours | </a></li>
				<li><a href="#" data-filter=".Christian">Christian Tours | </a></li>
				<li><a href="#" data-filter=".Art">Art Tours | </a></li>
<li><a href="#" data-filter=".Romance">Romance Tours | </a></li>
<li><a href="#" data-filter=".Food">Food Tours | </a></li>
<li><a href="#" data-filter=".Day">Day Trips | </a></li>
<li><a href="#" data-filter=".Kids">Kids</a></li>
			</ul>
		<!-- Filter container -->
				<ul id="filter-container" class="feature cf" itemscope itemtype="http://schema.org/EventReservation">
        <?php 
				$tcount=count($tours);
				$tcount=$tcount-1;
				for($i=0; $i<=$tcount;$i++){
				 echo "
					<li class=\"".$tours[$i]['location']."\">
						    <a href=\"".$tours[$i]['nav_url']."\"><div class=\"ribbon\"><span>From € ".$tours[$i]['action']."</span></div></a>
                            <a href=\"".$tours[$i]['nav_url']."\" class=\"thumb\">".$tours[$i]['img']."
							<div class=\"date\"><div class=\"raf\"></div></div>
							</a>
                            <h4 class=\"tour_title\" itemprop=\"name\">".$tours[$i]['title']."</h4>
                            <div class=\"caption\" itemprop=\"description\">".$tours[$i]['blurb']."</div>
							<p><a href=\"".$tours[$i]['nav_url']."\" title=\"".$tours[$i]['title']."\" class=\"tours btn btn-primary\" itemprop=\"url\" role=\"button\">View Tour &rarr;</a></p>
                    </li>
					";
				}?>
				</ul><!-- ENDS Filter container -->

谁能帮我弄清楚如何在页面加载时沿着每一行顺序加载每个产品/旅游/盒子？现在的页面实例位于 here。

最佳答案

对 - 解决了它。

总体问题是我的第一行 JS 代码是

$(window).load( function() {

这基本上意味着页面必须在执行任何其他操作之前加载，这显然与我想要的完全相反。

然后为了使图像/盒子/产品沿每一行顺序加载，我的代码然后继续:

var $container = $('#filter-container').isotope({
        itemSelector: 'li',
        filter: '*',
        resizable: false,
        columnWidth: 'li',
        animationEngine: 'best-available'
    });

    $container.imagesLoaded().progress( function(){
        $container.isotope('layout');
    });

希望对其他人有所帮助。

关于javascript - 尝试使图像在同位素中按顺序加载和显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49773265/

上一篇：html - 将 div 定位到另一个 div 的底部并针对移动设备进行优化

下一篇：javascript - 无法突出显示可切换的 div 内的代码

相关文章：

javascript - 删除动态生成按钮的 onclick 内容

php - 有没有办法限制下拉框的大小

javascript - Underscore.js _.tap() 函数什么是方法链？

javascript - formData 对象不适用于 jquery AJAX post？

javascript - Youtube iframe api 检查视频是否存在

css - svg 分组元素联合悬停

css - 不随列表滚动的 ionic 添加标题

javascript - 无法使用 puppeteer 截取屏幕截图，它会转储一个空图像文件

javascript - 有人知道 navigator.platform 在 Chrome OS 上返回什么吗？

javascript - 在 JS 中编写原型(prototype)继承的最简洁方法

©2024 IT工具网  联系我们