Question

我花了两天时间阅读我能找到的每一段代码，但无法找到解决方案并将其应用到我的情况中。我希望有人可以提供帮助。

我有一系列产品/盒子（包含图像，文字等），我使用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

Answer 1

对 - 解决了它。

整体问题是我的第一行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');
    });

希望能帮助别人。

试图使图像加载＆amp;在Isotope中顺序出现

1 个答案: