标签: jquery-isotope

http://isotope.metafizzy.co/docs/help.html说：

第一项打破砌体布局

使用 Masonry 布局模式 如果您遇到重新调整第一个项目大小的问题，并且所有其余项目不再适合在网格中，您很可能需要设置 columnWidth 选项。如果没有设置 columnWidth，砌体布局模式将使用第一个项目的宽度作为其列的大小。

$('#container').isotope(
  masonry: {
    columnWidth: 220
  }
});

这就是我目前正在做的事情。但是我想要一些改变 columnWidth 的 CSS 媒体查询。因此，如果我的第一个 Isotope-item 具有正常的 1x 宽度，我可以只在 CSS 中指定项目的宽度，Isotope 将从那里获取 columnWidth 并工作。但是因为我的第一个项目有 2x 宽度，我必须像上面的代码一样指定列宽，当然我不能再用 CSS 更改它。

那么是否有可能例如：

• 使同位素从具有 1x 宽度的第二个项目中获取 columnWidth？
• 进行某种黑客攻击，因此实际上我将有一个 1x 宽的项目作为第一个项目，但会使用 display:none 或其他方式设置隐藏它？
• 将 Isotope columnWidth 设置为第一个项目的宽度（2x 宽）减去 10px 并除以 2？

我有一个简单的项目。我将同位素用于砌体网格和 Bootstrap 4 ( flex)：

$(window).on('load', function(){

    function gridMasonry(){
        var grid = $(".grid")
        if( grid.length ){
            
          grid.isotope({
            itemSelector: '.grid-item',
            percentPosition: true,
            layoutMode: 'masonry',
            masonry: {
              //columnWidth: '.grid-sizer'
            }
          });
            
        }
    }
    gridMasonry();
});

.grid-item img {
  height: 192px;
  width: 100%;
  
  object-fit:cover;
}

.y-2.grid-item img {
  height: 400px;
  width: 100%;
}

.grid-item {
  margin-bottom: 16px;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
  
  
  <div class="container">
    <div class="row grid">
      <div class="col-sm-3 grid-item y-2">
        <img src="https://dummyimage.com/400x900/000/fff&text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-3 …

我试图让jQuery Isotope的砌体布局在这个测试网站上运行:http://make.truliablog.com/test-filters

它似乎正在对它们进行正确排序,但是当您调整窗口大小并调整块时动画不起作用.我该如何解决这个问题？

这是相关的jQuery代码.

<script>
    jQuery(document).ready(function(){
        jQuery('#container').isotope({
            masonry : {
                columnWidth : 50
            }
        });

        // Filter buttons
        jQuery('#filters a').click(function(){
            var selector = jQuery(this).attr('data-filter');
            jQuery('#container').isotope({ filter: selector });
            return false;
        });
    });
</script>

我的投资组合位于http://www.visualise.ca/,我正在研究运行同位素的新版本.它可以在http://themes.visualise.ca/visualise上找到.

当我点击将在页面中加载帖子的图像缩略图时,我希望页面使用jQuery scrollTo插件和以下代码滚动到项目(单击的图像缩略图):

$container.delegate( $itemString, 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
        $('html,body').scrollTo(this, 800);
});

但经过测试,看起来物品的位置总是顶部:1左:容器的1(如果物品没有1px边框,则为0).此外,当我使用Firebug检查项目时,突出显示的蓝线不在项目本身上,而是位于顶部:1左侧:容器中的1.

所以我怀疑因为同位素所有的插件现在都认为所有项目都位于0,0(1,1因为我的情况下的边距).

为了正确滚动,我该怎么办？

非常感谢您的时间和帮助.

我试图在我的Div之间获得10px的装订线宽度,但它似乎没有应用.同位素脚本正在工作,因为项目随机播放,我也有一个过滤导航工作.

我只是在努力争取这个天沟!:(

下面是代码:

    $('#main-project-grid').isotope({
        masonry: {
            columnWidth: 313,
            gutterWidth: 10
        }
    });

这是我的HTML:

    <div class="container" id="main">
        <div class="container-content" id="main-grid">

            <div class="post-grid">
                Box Item
            </div>

            <div class="post-grid">
                Box Item
            </div>

            <div class="post-grid">
                Box Item
            </div>

            <div class="post-grid">
                Box Item
            </div>

            <div class="post-grid">
                Box Item
            </div>

        </div>      
    </div>

我有一个带有可点击元素的标准同位素视图.通过单击元素,它将变得更大.大元素的高度在CSS文件中定义,但我需要可变高度,具体取决于DIV的内容(内容是文本); 不幸的是,使用min-height css-property而不是height不起作用,高度始终是定义的最小高度,即使内容更多.有什么意见吗？

继承人我的javascriptcode:

<script>
jQuery(function() {
    var jQuerycontainer = jQuery('#container');
         jQuerycontainer.addClass('clickable');
   // add the class large to the first element
     jQuerycontainer.find('.views-row-1').each(function() {
         jQuery(this).addClass('large');
     });
     jQuerycontainer.isotope({
        itemSelector: '.element',
        masonry: {
            columnWidth: 230
        },
        masonryHorizontal: {
            rowHeight: 230
        }
    });
    var jQueryoptionSets = jQuery('#options .option-set'),
        jQueryoptionLinks = jQueryoptionSets.find('a');
    jQueryoptionLinks.click(function() {
        var jQuerythis = jQuery(this);
        // don't proceed if already selected
        if (jQuerythis.hasClass('selected')) {
            return false;
        }
        var jQueryoptionSet = jQuerythis.parents('.option-set');
        jQueryoptionSet.find('.selected').removeClass('selected');
        jQuerythis.addClass('selected');
        // make option object dynamically, i.e. …

我注意到当使用jQuery Isotope或Masonry与流畅/响应式网站时,元素会在浏览器窗口调整大小时暂时重叠.请参阅下面的图片,这是此演示的截图.您还可以在Isotope 网站上看到这种情况.

有什么办法可以避免这种重叠吗？

我在页面加载时隐藏同位素元素时遇到问题.我按照https://github.com/desandro/isotope/issues/56上的解释进行了操作.然而,虽然我想隐藏的元素没有显示(在css中使用"opacity:0"),但是它留下了一个空白区域.

你可以在http://whatcanido.co.uk/pace/看到它.它是网格中的第一个项目.

如果您将鼠标悬停在顶部菜单中的"专业知识"项目上,然后单击"架构",它就可以了.

我正在使用别人的Wordpress主题,我正在调整,无法弄清楚为什么留下空白.

我需要隐藏第一个项目,直到激活过滤器.

我将不胜感激任何帮助.

本

在Isotope 2.0中,我希望元素容器使用overflow:auto修复100%高度,但是,当布局完成时,它会不断将容器的高度更改为绝对像素(因此容器中没有滚动).

Isotope 2.0中不再有"resizesContainer:false".

这是我到目前为止所拥有的:

$(document).ready(function(){
    var $container = $('#content');

    $container.imagesLoaded(function() {
        $container.isotope({
            filter : '*',
            layoutMode : 'masonry',
            // itemSelector: ".boxportfolio3",
            resizesContainer : false,
            containerStyle : {
                overflow : 'auto',
            },
            animationOptions : {
                duration : 750,
                easing : 'linear',
                queue : false,
            }
        });

        $container.isotope('on', 'layoutComplete', function(a,b) {
            console.log("this is not executed. why?? ");
            $(".isotope").css("height", "100%");
        });



    });
});

我是在stackoverflow上发布的新手,也是使用Codepen的新手; 所以请和我一起温柔!

在找到David DeSandro精彩的砌体后,我找到了惊人的同位素.我一直在努力完成(我相信)应该是维护项目原始顺序的非常简单的任务.撕掉我的头发好几天之后(还尝试了''''''''''''''''''''''''''''''''''''''''''''''''''''... ... ...

基本上,我有许多页面,每个页面包含(不同的)"盒子"数量.每个盒子都有相同的宽度,但高度不同.这些框必须按原始顺序排列,并在调整窗口大小时保留该顺序.

示例CODEPEN:同位素 - 尝试按原始顺序对项目进行排序

这些方框不会被编号 - 它们仅在我的笔中编号以便说明.

HTML:

<div id="container">

    <div class="prod one"><h1>One</h1></div>
    <div class="prod two"><h1>Two</h1></div>
    <div class="prod three"><h1>Three</h1></div>    
    <div class="prod four"><h1>Four</h1></div>
    <div class="prod five"><h1>Five</h1></div>  
    <div class="prod six"><h1>Six</h1></div>
    <div class="prod seven"><h1>Seven</h1></div>    
    <div class="prod eight"><h1>Eight</h1></div>    
    <div class="prod nine"><h1>Nine</h1></div>
    <div class="prod ten"><h1>Ten</h1></div>
    <div class="prod eleven"><h1>Eleven</h1></div>
    <div class="prod twelve"><h1>Twelve</h1></div>
    <div class="prod thirteen"><h1>Thirteen</h1></div>
    <div class="prod fourteen"><h1>Fourteen</h1></div>
    <div class="prod fifteen"><h1>Fifteen</h1></div>
    <div class="prod sixteen"><h1>Sixteen</h1></div>
    <div class="prod seventeen"><h1>Seventeen</h1></div>        

</div>  <!-- /end container -->

CSS(我在这里道歉 - 尽管经过多次尝试,我的帖子似乎不允许我把它作为代码 - 尽管它有效 - 请参阅我的CodePen示例. …