标签: jquery-isotope

外部填充和边缘与砌体/同位素

我一直在与Isotope挣扎一段时间.经过几次不同的会议后,我似乎无法想出这一个.

isotope.metafizzy.co/index.html

我将用图像说明我的问题,但这是解释.正如你在我的网站上看到的那样,

test.davewhitley.com/not-wp/isotope_test/index.php

我正在使用具有三个相同宽度列的同位素.

如果查看中心布局的外边缘,可以看到有一些填充,迫使整个中心比页眉/页脚稍窄一些.我已经使用CSS了解我的内容,但我无法弄清楚如何将中央画廊扩展到包含它的div的边缘(它是960px - 因此,中央画廊大约是940px).通常我只用div和一些CSS就可以做到这一点,但是砌体的javascript是我的头脑(所有的计算等等).任何帮助将不胜感激.

这是我的问题说明.是)我有的:

http://farm7.static.flickr.com/6207/6057816365_e0b6e2e8c4.jpg

我想要的是什么:

http://farm7.static.flickr.com/6208/6058362460_d1200a1491.jpg

对于链接图像和非超链接文本,我很抱歉这个网站太年轻了.

jquery width jquery-masonry jquery-isotope

dav*_*ave

2011 08-20

6
推荐指数

1
解决办法

2万
查看次数

如何获得同位素以避免可变尺寸瓷砖的间隙

有没有办法让同位素以没有间隙的方式对网格进行排序？

我看到这些元素在少数演示中发生了变化,但我自己无法达到效果.像这里:http://isotope.metafizzy.co/demos/layout-modes.html

这是我的小提琴:http: //jsfiddle.net/crappish/zvRy5/

如您所见,当您调整"结果"的大小时,网格会改变,但在某些宽度处,马赛克中会出现白色间隙.这是非常不幸的.:(

javascript jquery jquery-isotope

cra*_*ish

lucky-day

6
推荐指数

1
解决办法

6704
查看次数

jQuery同位素复选框过滤器,如果全部取消选中则不显示任何项目

这是关于过滤jQuery同位素itemselector的输入复选框.

请参阅此处的演示,在页面加载时选中复选框.但是,当用户取消选中所有问题时,我偶然发现问题,它只显示所有.items而不是空容器.

$checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values                
    $checkboxes.filter(':checked').each(function(){
    filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join(', ');
    $container.isotope({ filter: filters });
});

Run Code Online (Sandbox Code Playgroud)

非常感谢,欢呼

checkbox jquery jquery-isotope

Mar*_*low

2013 01-31

6
推荐指数

1
解决办法

1931
查看次数

Isotope不能使用ajax加载的内容

我有一个包含4个选项的选择框,选择每个选项将导致删除所有当前的.itemdiv并加载新的.items然后使用同位素重新排列它们.

$('.menu-select').change(function(){
    var selected=$('.menu-select-option:selected').html().toLowerCase();
        if(selected=='all')
            {
                loadContent('mixed_home_all.html');
            }
        if(selected=='recommended')
            {
                loadContent('mixed_home_reco.html');
            }
        if(selected=='popular')
            {
                loadContent('mixed_home_pop.html');
            }
});

Run Code Online (Sandbox Code Playgroud)

loadContent函数如下所示:

    function loadContent(filename){
        var $item=$('.item');
        $container.isotope('remove', $item);
        $container.load(filename, function(){
            $container.imagesLoaded(function(){
                $container.isotope('reLayout');
            });
        });
    }

Run Code Online (Sandbox Code Playgroud)

有些原因,reLayout是行不通的.该课程isotope-item也没有被添加到单个项目中.这是控制台日志中没有错误.

jquery jquery-isotope

sou*_*ste

lucky-day

6
推荐指数

1
解决办法

6753
查看次数

搜索不起作用后同位素重新排序

我已经集成了一个jquery搜索插件来搜索同位素元素,该插件使用正则表达式根据搜索输入实时对内容进行排序.

同位素元素正在自动更新(我正在使用wordpress插件从社交网络中检索数据)

我的问题是,如何在执行搜索后重新排序元素？

LE:我已经解决了这个通过使用其他插件SEARCHING:这里是代码:

               $(document).ready(function () {
            $("#id_search").quicksearch(".dcsns-content .isotope-item", {
                noResults: '#noresults',
                loader: 'span.loading',

                'show': function () {
    $(this).addClass('quicksearch-visible');
},
'hide': function () {
    $(this).removeClass('quicksearch-visible');
},
'onAfter': function () {
   $('.dcsns-content .stream').isotope({ filter: '.quicksearch-visible' });
}
            });
        });

Run Code Online (Sandbox Code Playgroud)

search jquery jquery-isotope

agi*_*gis

2013 05-27

6
推荐指数

1
解决办法

1975
查看次数

加载的砌体/同位素/填充图像+ Web字体

我在网站上使用Packery.js [ http://packery.metafizzy.co/ ]并且在页面加载时遇到一些布局问题.我查看了Mason,Isotope和Packery的文档(所有非常相似的插件,全部由David DeSandro开发),并讨论了在加载所有图像以及任何webfonts之后应该触发布局的问题.

http://packery.metafizzy.co/appendix.html

我的Packery工作得很好,只能使用imagesLoaded ......但我不确定如何将Google Web Font加载器与之配合使用.下面是我加载字体的代码,后面是imagesLoaded Packery Layout.如果任何人都可以建议在Web字体和图像加载之后让Packery解雇,我将永远感激不尽.

// before <body>
<script type="text/javascript">
WebFontConfig = {
    google: {
        families: [ 'Bitter:400,700,400italic:latin' ]
    },
    typekit: {
        id: // hidden for obvious reasons
    }
};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
</script>

// after </body>
// jquery and plugins are loaded prior to the …

Run Code Online (Sandbox Code Playgroud)

typekit jquery-masonry jquery-isotope webfont-loader packery

bee*_*imi

lucky-day

6
推荐指数

1
解决办法

2046
查看次数

使用Jquery Isotope时在Chrome中使用Bootstrap 3列的问题(但在Safari中很好!)

我花了好几天时间试图解决这个问题而且我的智慧结束了.如果有人有任何见解,我将非常,非常感激.

我正在一个网站上工作并使用Bootstrap 3和Jquery Isotope.我使用Bootstrap 3的网格来排列四列div.一切都很好,直到我将同位素过滤器应用于div.在这之后,在Chrome中,它变为三列布局,右侧有巨大的间隙.似乎div保持相同的宽度 - 它们只是在三个而不是四个之后断开.令人抓狂的是,Safari中的一切似乎都运行良好!

以下是差异的说明.Safari(正确): 苹果浏览器

Chrome(不正确):

我已经尝试了所有的东西,我找到的唯一"解决方案"是将包含Isotope元素的.container div上的padding-left和padding-right更改为0.我不想这样做,但是,因为那时候其他含同位素的.container divs将无法正常排列.

我真的非常感谢你能给予的任何帮助!我真的无法想出这个...我已经创建了一个基本的Jsfiddle来说明:

http://jsfiddle.net/kECqL/5/

这是基本的html:

<div class="container">
    <div class="row iso">
        <div class="col-sm-3 iso-item" style="padding-bottom: 20px;">
            <div style="background-color: green;">
                <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p>
            </div>
        </div>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

这是Isotope脚本:

<script type="text/javascript">
var $container = $('.iso');

$container.imagesLoaded( function(){
  $container.isotope({
    // …

Run Code Online (Sandbox Code Playgroud)

safari google-chrome jquery-isotope twitter-bootstrap twitter-bootstrap-3

orn*_*mnt

lucky-day

6
推荐指数

1
解决办法

3803
查看次数

同位素不使用imagesLoaded？

我正在使用jQuery Isotope创建一个水平布局,将DIV彼此相邻的100%高度对齐,并将每个DIV中的图像垂直对齐.因此,我称之为Isotope就像这样,Chrome(本地)的一切正常:

$(function(){
    var $container = $('#container');
    $container.isotope({
        itemSelector : '.itemwrap',
        layoutMode: 'horizontal',
        horizontal: {
            verticalAlignment: 0.5
        }
    });
});

Run Code Online (Sandbox Code Playgroud)

由于图像需要时间加载,它们往往会弄乱Isotope布局,所以我正在尝试使用imagesLoaded修复:http://isotope.metafizzy.co/appendix.html

我实现了这样的修复:

$(function(){
    var $container = $('#container');
    $container.imagesLoaded( function(){
        $container.isotope({
            itemSelector : '.itemwrap',
            layoutMode: 'horizontal',
            horizontal: {
                verticalAlignment: 0.5
            }
        });
    });
});

Run Code Online (Sandbox Code Playgroud)

使用此图像加载,同位素不再加载.删除imagesLoaded,Isotope再次启动(但是混乱的布局).有谁知道,错误在哪里？

谢谢!

jquery jquery-isotope imagesloaded

R4t*_*ake

2014 04-30

6
推荐指数

1
解决办法

8099
查看次数

无法导入同位素插件---“$(container).isotope is not a function”

我让Metafizzy Isotope插件工作的运气为零。网络选项卡显示它没有通过。

我安装isotope-layout在我需要它main-file.js，但代码无法识别$(container).isotope。

涂黑的部分是的实际名称main-file.js。

我也在使用 webpack 并且想知道它是否是问题的一部分，但我不能肯定地说。

索引.js：

// css imports here

import "jquery/dist/jquery.min.js";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

import mainfile from "./SiteAssets/scripts/main-file.js";

Run Code Online (Sandbox Code Playgroud)

主文件.js：

import axios from "axios";
import "@babel/polyfill/dist/polyfill.js";

var isotope = require('isotope-layout'); // Seeing "'isotope' is declared but its value is never read

// var isotope = require('imports-loader?$=jquery!isotope-layout/dist/isotope.pkgd');

// import isotope from "isotope-layout";

let myClass,
    names,
    _token;

export default class {
    constructor() {
        myClass = this;
        myClass.setTokenVar();
        // a few …

Run Code Online (Sandbox Code Playgroud)

javascript import jquery npm jquery-isotope

Tsa*_*nes

2020 06-05

6
推荐指数

1
解决办法

918
查看次数