标签: jquery-isotope

有没有办法让同位素填充一行中的所有空白区域？

容器具有固定的宽度和3种不同类型的盒子(3个宽度和固定高度).我看到3种可能的解决方案

1. 使同位素在列表中进一步查看并确定合并盒子的最佳方法,以便减少空白区域,并且这些空间都位于容器的底部.在这种情况下,我们需要足够不同尺寸的盒子.

2. 调整一些框的大小并移动它们以使行总是满的.

3. 在将盒子及其尺寸放入容器之前检测它们的数量并改变它们中的一些尺寸,因此有各种尺寸,希望同位素具有较少的带有白色空间的行.

我希望有人可以把我放在正确的方向

我正在研究jquery同位素,过滤器在同一页面portfolio.html上使用下面给出的方法工作得很好:

<li class="current"><a href="#" data-filter="*">all</a></li>
<li><a href="#" data-filter=".design">design</a></li>
<li><a href="#" data-filter=".coding">coding</a></li>
<li><a href="#" data-filter=".logo">logo</a></li>

我想要实现的是链接到特定类别,以便我的用户可以从其他页面进入过滤类别.

我尝试了以下链接方法,但它不起作用:

<a href="portfolio.html#filter=logo" data-filter=".logo">logo</a>

谁能帮我吗？有没有任何方法来预过滤类别？

我正在尝试整合同位素,但是我在使用ajax时遇到了问题.

这是代码:

<script type="text/javascript">

var currentPage = 1;

$(function(){
    var getUrl = 'loadMovies.php';
    var getQuery = 'genrefilter='+movieSelection.elements["genreFilter"].value;
    getQuery += '&yearfilter='+movieSelection.elements["yearFilter"].value;
    getQuery += '&titlesort='+movieSelection.elements["titleSort"].value;
    getQuery += '&ratingsort='+movieSelection.elements["ratingSort"].value;
    getQuery += '&yearsort='+movieSelection.elements["yearSort"].value;
    getQuery += '&runtimesort='+movieSelection.elements["runtimeSort"].value;
    getQuery += '&currentPage='+currentPage;

    var $container = $('#movieBox');
    //$container.isotope({itemSelector: '.movie'});

    $.ajaxSetup({cache:false});  
    var ajax_load = "<img class='loading' src='images/load.gif' alt='loading...' />";

    //$("#genreFilter").change(function(){$container.isotope('insert', ajax_load).load(getUrl, getQuery);});


    $("#genreFilter").change(function(){$('#movieBox').html(ajax_load).load(getUrl, getQuery);});
});

HTML只是""

随着同位素线的注释,我实际上得到了按预期显示的div,但由于我无法弄清楚如何在同位素线上工作,我无法使其工作.

我试图将同位素与"插入"方法结合起来,我在没有ajax的情况下开始工作.

摘自:http://isotope.metafizzy.co/docs/adding-items.html

"插入方法

更有可能的是,您希望使用insert方法,该方法执行addItems未命中的所有操作.insert会将内容附加到容器,过滤新内容,对所有内容进行排序,然后触发reLayout,以便正确布置所有项目元素.

var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
$('#container').isotope( 'insert', $newItems );

最后一行是我需要与ajax线集成,但我只是看不到我可以放置它.香港专业教育学院尝试了几种方法,其中一种方法显示在注释掉的行中. …

我有一个同位素项目,当有人在里面评论时它会增长.当它生长时,我如何告诉主同位素容器随之生长？现在正在发生的事情是,随着同位素项的增长,同位素容器保持它在调用$(".home_main")时设置的初始高度.同位素(); 因此,当我在同位素项中留下注释时,项目会增长,然后被主容器切断.谢谢.

我已经看到你可以设置,resizesContainer: true但这对我没有帮助.谢谢.

不确定它是否有任何区别,但我也尝试使用Masonry jquery插件(看起来非常相似)并且遇到了同样的问题.

我在相同的页面中使用同位素过滤器和无限滚动插件,因此这两者都不能完美地工作,一些设计问题反映了同位素jQuery文件.当我在滚动中单击更多按钮时,它会更好地发布,但未正确放置.它落后于旧职位.我现在还无法找到解决方案.如果有任何人有同样的问题,并发现任何想法,请随时回答我的问题.

这是我的同位素过滤器的jQuery函数

$(function(){

    // Orginal function by Alien51
    var $container = $('#container');
    $container.isotope({
    masonry: {
      columnWidth: 80
    },
    sortBy: 'number',
    getSortData: {
      number: function( $elem ) {
        var number = $elem.hasClass('element') ? 
          $elem.find('.number').text() :
          $elem.attr('data-number');
        return parseInt( number, 10 );
      },
      alphabetical: function( $elem ) {
        var name = $elem.find('.name'),
            itemText = name.length ? name : $elem;
        return itemText.text();
      }
    }
  });
        var $optionSets = $('#options .option-set'),
      $optionLinks = $optionSets.find('a');

  $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already …

我正在使用twitter bootstrap将2个div并排放置.每个div中都有中大图像,使用jquery 同位素排列.问题是当div中没有​​足够的图像时,div宽度保持不变,并留下很多额外的空间.像这样 :

我希望div在中央对齐,并且还要减小宽度以适应其中的图像.像这样:

我的HTML代码是这样的:

<div id="container" class="container-fluid">
    <div class="row-fluid">
        <div class="legend span8">Section1</div>
        <div class="legend span4">Section2</div>
    </div>
    <div class="row-fluid">
        <div id="section1" class="span8">
            <div class="small"><img src="images/1.jpg" /></div>
            <div class="small"><img src="images/2.jpg" /></div>
            <div class="big"><img src="images/3.jpg" /></div>
        </div>
        <div id="section2" class="span4">
            <div class="small"><img src="images/1.jpg" /></div>
            <div class="small"><img src="images/2.jpg" /></div>
            <div class="big"><img src="images/3.jpg" /></div>
        </div>
    </div>
</div>

我的CSS看起来像这样:

#section1 .small{
    width:150px;
    height:200px;
    overflow:hidden;
}
#section1 .big{
    width:320px;
    height:420px;
    overflow:hidden;
}
#section2 .small{
    width:80px;
    height:100px;
    overflow:hidden;
}
#section2 .big{
    width:170px;
    height:220px;
    overflow:hidden;
} …

我正在尝试动态更改Isotope项目上的排序数据值,但Isotope似乎缓存初始订单值并仅在'reLayout'调用时使用该值.

我有一个项目页面,当单击时,将扩展到容器宽度的100%.调整大小后,所有同位素项目都必须重新排序到特定位置.我遍历每个框并更新排序值.

以下示例显示了两个Isotope对象,top包含动画,它生成正确的排序顺序值,但定位错误,第二个应该是正确的结果.

完整的例子:http://jsfiddle.net/eB85m/4/

无论如何,Isotope是否可以检索新的排序数据或直接更新Isotope的排序数据值？

我正在使用同位素插件(http://isotope.metafizzy.co/)和无限的ajax滚动插件(https://github.com/webcreate/infinite-ajax-scroll).无限卷轴与同位素过滤效果很好,但是,我想在应用过滤器时将更多项目加载到容器中,以便始终显示50个项目.

我有下面的代码,但我坚持用ajax加载新项目.

因此,每次选择过滤器时,我都会计算当前显示的项目数量.然后我需要一种方法来使用ajax获取更多项目并调用相同的页面(index.php).我想我需要做一些类似于无限ajax滚动插件的东西,以获得下一页的结果.我对JQuery没有经验,所以我很难弄清楚他们的代码究竟在做什么,以及如何为我的过滤实现类似的东西.

我尝试过使用$ .get但是这会在容器中加载整个index.php页面而不是仅仅获取结果.

如果有任何帮助,我将不胜感激.

<?php

require_once('config/config.php');

$cat = (isset($_GET['cat']) ? urldecode($_GET['cat']) : '');
$type = (isset($_GET['type']) ? urldecode($_GET['type']) : '');

//get filter lists
$categories = StoreDiscounts::getCategories();
$types = StoreDiscounts::getDiscountTypes();

//get total number of discounts for search
$total_items = StoreDiscounts::countitems($cat, $type);
//pagination  - infinate scrolling
$pagelimit = 50; //items per page
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
$start = ($page * $pagelimit) - $pagelimit;
$limit = $pagelimit * $page;

if ($total_discounts > ($page …

我在谷歌浏览器中使用同位素,所有项目包含:

-webkit-transform: translate3d(properties);

每个偶数元素[2,4,6,8,10,12,14 ...]在chrome中都是模糊的,在firefox中一切都还可以

以下是第一个元素的属性:

position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(225px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(450px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(675px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(900px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 183px, 0px);

我试过使用-webkit-transform:scale3d(0.5,0.5,1); 但它不起作用

因此，我的项目可以具有多个用于过滤的类。像这样：

<div class="items>
    <div class="item category-1 category-2">An item that displays initially.</div>
    <div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
    <div class="item category-1 category-2">An item that displays initially.</div>
    <div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
    <div class="item category-1 category-2">An item that displays initially.</div>
</div>

使用同位素，如何在页面加载时隐藏具有特定类的项目？假设我要隐藏任何类别为带initially-hidden负载的项目，但是当我单击该项目具有的其他任何类别的过滤器时，仍然能够显示该项目？对于上面的示例代码，说我单击了一个category-2过滤器，那么所有具有category-2（即使具有initially-hidden）的项目都会出现吗？

基本上在我正在处理的项目中，客户端希望能够最初在页面加载时隐藏项目，但是在过滤时显示它们。因此，我为她创建了一种使用标记这些内容的方法initially-hidden，但无法绕过如何最初隐藏它们的想法，但是当单击关联的过滤器时，仍然允许它们显示出来。

我已经通过desandro 遇到了这个小提琴，但这并不是我要找的东西，因为它假定每个项目只有一个类（红色，绿色或蓝色）。

编辑

这是我编辑过的desandro小提琴的一部分，它更像我的情况（项目可以有多个类）。小提琴。

最终编辑

答案似乎是相反的，添加一个initially-shown类并过滤页面加载时的那些类。因此，没有让我的客户将所有内容都标记为initially-shown，而是使用了这种方法：

$container.find('.tile:not(.initially-hidden)').addClass('initially-shown');

因为它们有数百个项目，而且似乎只藏了极少数。

这是最新的小提琴。