标签: jquery-isotope

我正在使用jQuery Isotope来填充多宽度多高度网格(等比例)的空间.

使用带有按钮的ui-sortable对网格进行排序,以便在排序后切换回Isotope.有一些排序顺序留空块.如何使用Isotope填充空格？

我已经尝试了多种Isotope布局方法.

见http://jsfiddle.net/zdSYG/41/

$(document).ready(function() {

var $itemList = $('#sortable');

    $itemList.isotope({
    resizesContainer: false,
    masonry: {
        rowHeight: 250,
        columnWidth: 325
    }
});

$('#wp-admin-bar-edit').click(function() {
    $itemList.isotope('destroy');

    $itemList.sortable({

        //Do Ajax Stuff with UI-Sort Order
    });

});
});
//Toggle back to Isotope after jQuery UI-Sortable Ajax stuff
$(document).ready(function() {
$('#wp-admin-bar-sort').click(function() {
    $('#sortable').isotope({
        resizesContainer: false,
        masonry: {
            rowHeight: 250,
            columnWidth: 325

        }
    });
});
});

UDATE:

在Firefox 4和IE 8&9中实现了预期的效果,但问题似乎与谷歌Chrome(最新版稳定频道)有关.

铬:

Firefox 4:

我正在构建一个利用David DeSandro的精彩Isotope插件的photoblog,但我很难让插件在响应/流体网格中按预期工作.

www.lewismalpas.co.uk/tumblr(演示)

每个图像都包含在一个div(.item)中,其明确的宽度为25%,因为图像很灵活,理论上这应该允许四个图像内联显示,但是目前只有两个图像被显示,我似乎无法看到找出问题所在.

<script type="text/javascript">
$(document).ready(function(){

//scroll to top of page
$("a.top").click(function () {
    $("body,html").animate({scrollTop: 0}, 800);
    return false;
});

//Isotope settings
var $container = $('.images')
$container.imagesLoaded( function(){
    $container.isotope({
        resizable: false, // disable normal resizing
        masonry: { columnWidth: $container.width() / 4 }
    });
    // update columnWidth on window resize
    $(window).smartresize(function(){
        $container.isotope({
            masonry: { columnWidth: $container.width() / 4 }
        });
    });
});

//layout & search options
$(".header #layout").hide();
$(".header a.layout").click(function() {
    $(".header #layout").fadeIn();

    $(".header a.fullscreen").click(function() {
        $("a.layout-option").removeClass("selected");
        $(this).addClass("selected");
        $("#container").animate({width:"99%"}, function() …

我正在使用Isotope进行项目.我们买了一张商业执照.

我需要将同位素瓷砖放在固定尺寸的容器中(高度特别重要)才能在更大的布局中工作.

我尝试在容器上设置css高度:

<style type="text/css">
  #container {
    width:990px;
    height: 550px !important;
    overflow: scroll;
  }
</style> 

但是这会创建一个不可滚动的容器.我错过了什么？

我正在使用同位素来建立一个平滑的网格画廊.目前我遇到了追加功能的问题:http: //isotope.metafizzy.co/docs/methods.html#appended

如果我这样称呼追加

$('#loadMore').click(function(){
    val='<div class="content-box masonry-brick img11"><a href="#"><img src="images/1.jpg" style="width: 290px; height: 163.36666666666667px; "><div class="portfolio-more"><div class="portfolio-icon"></div></div></a><div class="content-box-content"><h3 class="post-info">Lifestyle / People</h3><h2>Street Life</h2></div></div>';

    var $container = $('#grid-gallery');
    $container.isotope( 'appended', val)

    return false;
  }); 

然后同位素吐出以下错误消息:

[content] has no method 'filter'

如果我向div添加定位,那么它工作正常,除了新元素被加载到该位置并保持固定.

请参阅http://jsfiddle.net/cUcFd/5/ - 请注意,如果将layoutMode更改为"masonry"或"fitRows",则可以正常工作.但是使用'fitColumns'它只是空白,所有的块都消失了.

似乎有关于容器和项目设置的样式的要求,以便fitColumns模式工作,但我找不到任何关于它们是什么的文档.

我读到了关于砌体的建议,并且在未能将图像附加到工作后,建议切换到继承人Isotope.我试图在专辑封面库中改进或创建变体,这是我在使用相同的PHP类之前做过一两次的事情.

我可以使用基本功能,但单击添加更多图像的按钮始终无法正常工作.我一直在阅读jQuery文档,并且我尝试了各种JavaScript调试器,但是当我点击时,我总是最终没有将图像添加到我的库中.

为了获得最佳外观布局,绝对需要试验和错误.

最大的专辑封面似乎是500像素,API中最小的是75,选择正确的列宽帮助.我目前正在使用75但50可能效果更好.我只是想添加图像来完成这项小实验.

我想尝试类似于将更多图像添加到底部的技术.我想添加更多专辑封面,我使用PHP从各种API(亚马逊产品API,Last.fm,iTunes)获取.所有专辑封面都来自API,我使用PHP查找给出专辑标题和艺术家的URL.我的代码正在运行:http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php

我已多次更改CSS规则,现在我只有Isotope作者建议的默认CSS.

PHP代码循环并产生10个div,每个div有一个图像

$myAlbumCollection->randomMember();
    $count = 0;
    print('<div id="container">');

    while ( $count < 10 )
    {
        // Check that current album is in Amazon 
        $buyLink = $myAlbumCollection->currentAlbumAmazonProductURL();
        $imageURL = $myAlbumCollection->currentAlbumRandomImageURL();
        if ( (strcmp($buyLink, '#') != 0) && (strcmp($imageURL, myInfo::MISSING_COVER_URL) != 0))
        {
            $count++;
            print('<div class="item">'); 
            print('<a href="' . $buyLink . '">');
            print('<img src="' . $imageURL . '" />');
            print('</a>');
            print('</div>');
        }
        $myAlbumCollection->goToNextAlbum(); // This could loop forever if it doesn't find …

我有一个非固定宽度的同位素网格,我不知道如何将同位素容器内的物品居中.

.box{
width: 40px;
height: 40px;
background-color: #e74c3c;
margin: 0 auto;
}

css无法使项目居中.这是说明我的问题的小提琴的链接.

如何在黑匣子内制作红色方块？

我的同位素包装布局存在一个小问题,在某些窗口尺寸的某些项目之间出现非常薄的1px或更少的线条.有没有办法消除这种发际差距？

示例:http://i.imgur.com/6jkqhZw.png(查看第3项和第4项)

我在这里看一下JSFiddle:http://jsfiddle.net/drawcard/akw6m9x1/ (调整小提琴"窗口",这样你就可以看到空白)

// external js:
// http://isotope.metafizzy.co/beta/isotope.pkgd.js

//packery js (no need to copy this over if you have it included)
/*!
 * Packery layout mode PACKAGED v1.1.0
 * sub-classes Packery
 * http://packery.metafizzy.co
 */

!function(a){function b(a){return new RegExp("(^|\\s+)"+a+"(\\s+|$)")}function c(a,b){var c=d(a,b)?f:e;c(a,b)}var d,e,f;"classList"in document.documentElement?(d=function(a,b){return a.classList.contains(b)},e=function(a,b){a.classList.add(b)},f=function(a,b){a.classList.remove(b)}):(d=function(a,c){return b(c).test(a.className)},e=function(a,b){d(a,b)||(a.className=a.className+" "+b)},f=function(a,c){a.className=a.className.replace(b(c)," ")});var g={hasClass:d,addClass:e,removeClass:f,toggleClass:c,has:d,add:e,remove:f,toggle:c};"function"==typeof define&&define.amd?define("classie/classie",g):"object"==typeof exports?module.exports=g:a.classie=g}(window),function(a){function b(){function a(b){for(var c in a.defaults)this[c]=a.defaults[c];for(c in b)this[c]=b[c]}return c.Rect=a,a.defaults={x:0,y:0,width:0,height:0},a.prototype.contains=function(a){var b=a.width||0,c=a.height||0;return this.x<=a.x&&this.y<=a.y&&this.x+this.width>=a.x+b&&this.y+this.height>=a.y+c},a.prototype.overlaps=function(a){var b=this.x+this.width,c=this.y+this.height,d=a.x+a.width,e=a.y+a.height;return this.x<d&&b>a.x&&this.y<e&&c>a.y},a.prototype.getMaximalFreeRects=function(b){if(!this.overlaps(b))return!1;var c,d=[],e=this.x+this.width,f=this.y+this.height,g=b.x+b.width,h=b.y+b.height;return this.y<b.y&&(c=new a({x:this.x,y:this.y,width:this.width,height:b.y-this.y}),d.push(c)),e>g&&(c=new a({x:g,y:this.y,width:e-g,height:this.height}),d.push(c)),f>h&&(c=new a({x:this.x,y:h,width:this.width,height:f-h}),d.push(c)),this.x<b.x&&(c=new a({x:this.x,y:this.y,width:b.x-this.x,height:this.height}),d.push(c)),d},a.prototype.canFit=function(a){return this.width>=a.width&&this.height>=a.height},a}var c=a.Packery=function(){};"function"==typeof define&&define.amd?define("packery/js/rect",b):"object"==typeof exports?module.exports=b():(a.Packery=a.Packery||{},a.Packery.Rect=b())}(window),function(a){function b(a){function …

我使用jquery-match-height来匹配同位素布局的网格项内部div的高度,这在同位素网格加载时非常有效.

但是,当我过滤网格时,matchheight脚本不再处理div,每个div都返回其原始高度.

我试过了:

  $grid.on( 'arrangeComplete', function() { 
   console.log("OK, arrangeComplete");
   $.fn.matchHeight._update();
   //$('.card-text').matchHeight(); //Here I tried simply re-initiating... no effect
  });

我也尝试过:

if (!$grid.data('isotope').filteredItems.length ) {
 $.fn.matchHeight._update();
}

我根本无法获得匹配高度"refire"

我已经集成了一个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' });
}
            });
        });