Isotope.js - AJAX和容器高度

时间:2017-11-10 15:21:46

标签: jquery ajax wordpress jquery-isotope isotope

我正在使用Isotope.js对投资组合进行排序的网站上工作。还有一个按钮,用户可以点击AJAX加载更多帖子。

以下是临时网站的链接:https://contactlenzes.com

这是我发起Isotope.js的方式:

public class Main extends JavaPlugin implements Listener{

//int minutes = Waiting.timeUntilStart / 60;
//int seconds = Waiting.timeUntilStart % 60;
//String t = String.format("%02d:%02d", minutes, seconds);

public static Plugin plugin;
public static Main main;

ArrayList<UUID> player = new ArrayList();

public File file;
public FileConfiguration locationConfig;



public static int startCountdownId;
public static int startCounterId;

private int waitingtask;
private int count = 120;
private int number = 15;



public ArrayList<Player> players = new ArrayList();
public ArrayList<Player> spectators = new ArrayList();
public ArrayList<Player> innocent = new ArrayList();
public ArrayList<Player> traitor = new ArrayList();



public static Map<Location, Inventory> chests = new HashMap<Location, Inventory>();

public static String prefix = "§8§l┃ §6TIMV §8┃ §6";

Inventory spec;




public void onEnable() {



    Bukkit.getServer().getWorld("world").setTime(300);

    startCountdown();
    saveDefaultConfig();
    registerFile();

    GameState.setGamestate(GameState.WAITING);
    plugin = this;
    registerEvents();

    Bukkit.getConsoleSender().sendMessage("§cPlugin developed by InfernoArtz & Kodepus");

    this.getCommand("timv").setExecutor(new TimvCommand(this));
    //this.getCommand("role").setExecutor(new RoleCommand(this));
}

public void loc1() {
    Location loc = (Location) main.locationConfig.get("main.spawns.Lobby");
}



public void onDisable() {
    plugin = null;

}

/* SCOREBOARD KODER */
@EventHandler
public void onJoin(PlayerJoinEvent e) {
    final Player p = e.getPlayer();

    new BukkitRunnable() {


        @Override
        public void run() {
            final org.bukkit.scoreboard.Scoreboard s = Bukkit.getScoreboardManager().getNewScoreboard();
            p.setScoreboard(s);
            final Objective o = s.registerNewObjective("sidebar", "dummy");
            if (p == null || !p.isOnline() || GameState.getCurrentGamestate() != GameState.WAITING) {
                cancel();

                return;
            } else {

            }



            o.setDisplayName("§bTIMV §3" + Waiting.timeUntilStart);
            o.setDisplaySlot(DisplaySlot.SIDEBAR);
            o.getScore(" ").setScore(12);
            o.getScore("§6§lRole").setScore(11);
            o.getScore("§fUnknown").setScore(10);
            o.getScore("   ").setScore(9);
            o.getScore("§a§lPlayers Left").setScore(8);
            o.getScore("§f" + Bukkit.getOnlinePlayers().size()).setScore(7);
            o.getScore("    ").setScore(6);
            o.getScore("§b§lRound Stats").setScore(5);
            o.getScore("§7Karma: §f0").setScore(4);
            o.getScore("          ").setScore(3);
            o.getScore("§8§m--------").setScore(2);
            o.getScore("§6play.§eserver§6.com").setScore(1);

        } 
    }.runTaskTimer(this, 1, 20);
}



public void registerFile() {
    file = new File(getDataFolder(), "locations.yml");
    locationConfig = YamlConfiguration.loadConfiguration(file);
    saveFile();
}

public void saveFile() {
    try {
        locationConfig.save(file);

    } catch(IOException e) {


    }
}




public void registerEvents()
{


  Bukkit.getPluginManager().registerEvents((this), this);
  Bukkit.getPluginManager().registerEvents(new JoinEvent(this), this);
  Bukkit.getPluginManager().registerEvents(new QuitEvent(this), this);
  Bukkit.getPluginManager().registerEvents(new PlayerInteractEvent(this), this);
  Bukkit.getPluginManager().registerEvents(new PvpEvent(this), this);
  Bukkit.getPluginManager().registerEvents(new FallEvent(this), this);
  Bukkit.getPluginManager().registerEvents(new InventoryEvent(this), this);
  Bukkit.getPluginManager().registerEvents(new LobbyEvent(this), this);
  Bukkit.getPluginManager().registerEvents(new BlockPlace(this), this);
  Bukkit.getPluginManager().registerEvents(new BreakEvent(this), this);
  Bukkit.getPluginManager().registerEvents(new DeathEvent(this), this);
  Bukkit.getPluginManager().registerEvents(new LoginEvent(this), this);
  Bukkit.getPluginManager().registerEvents(new HungerEvent(this), this);
  Bukkit.getPluginManager().registerEvents(new NoMobSpawn(this), this);


}

@SuppressWarnings("deprecation")
public void startCountdown() {
    Waiting.timeUntilStart = 300;
    startCountdownId = getServer().getScheduler().scheduleSyncRepeatingTask(this, new Waiting(this), 20l, 20l);



    }
@SuppressWarnings("deprecation")
public void startCounter() {
    InGame.time = 0;
    startCounterId = getServer().getScheduler().scheduleSyncRepeatingTask(this, new InGame(this), 20l, 20l);


}

public void stopCountdown() {
    getServer().getScheduler().cancelTask(startCountdownId);
}

public void restartCountdown() {
    startCountdown();
    stopCountdown();
}

public static Main getPlugin() {
    return main;
}










   }

这是我的AJAX文件:

    // Portfolio isotope filter
$(window).load(function() {
    var $container = $('.projects');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
    $('.taxonomies a').click(function() {
        $('.taxonomies .active').removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
        return false;
    });

});

这是问题!

加载帖子的脚本。但是当帖子被加载时,Isotope.js不会重新计算容器的高度。

你可以在这里观察:

Isotope.js screenshot

在这里:

Inspector

按下过滤器按钮,解决了问题。

那么当通过AJAX添加新帖子时,如何强制Isotope.js重新计算容器的高度?

或者复制按下滤镜的效果......?

我希望我有意义。

感谢您的时间!

1 个答案:

答案 0 :(得分:0)

如果有人偶然发现这个问题。

我需要在图像加载后包装$content.isotope('layout');,如下:

$newElements.imagesLoaded(function(){
$content.isotope('layout');
});

更多信息可以在这里找到: https://imagesloaded.desandro.com/