Кодинг
★ Рубрика: Кодинг
★ Тема: облако, js

Еще одно красивое облако слов

Похоже красивые облака из слов еще долго будут актуальны - их можно использовать где угодно, начиная с визуализации уроков в школе и заканчивая семантическим анализом ключевых слов сайта. Поэтому продолжаем эту тему и мы - вашему вниманию предлагается еще одно красивое облако из слов и код для его реализации. Кстати, обратите внимание, при каждой новой загрузке страницы слова в облаке размещаются по разному - так что читатели вашего сайта не заскучают.
А теперь приведем код, отвечающий за отрисовку этого чудесного облака. Для начала вам понадобится файл со стилем облака: jqcloud.css, затем скрипт: jqcloud.min.js, которые следует подключить в начале страницы вместе с подключением jquery.min.js:
<link rel="stylesheet" type="text/css" href="/jqcloud/jqcloud.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/jqcloud/jqcloud.min.js"></script>
Дальше, скрипт, отвечающий за наполнение облака. В нашем случае это:
<script type="text/javascript">
 var word_list = new Array({text:"онлайн",weight:70},
{text:"внимание",weight:19},{text:"текста",weight:18},
{text:"редактор",weight:18},{text:"энтропия",weight:18},
{text:"картинка",weight:17},{text:"калькулятор",weight:14},
{text:"создать",weight:13},{text:"html",weight:13},
{text:"облако",weight:12},{text:"конструктор",weight:12},
{text:"лист",weight:11},{text:"слов",weight:10},
{text:"скачать",weight:10},{text:"информации",weight:9},
{text:"таблица",weight:9},{text:"привлечения",weight:8},
{text:"svg",weight:8},{text:"баннеров",weight:8},
{text:"фото",weight:8},{text:"шеннона",weight:7},
{text:"наименьшая",weight:7},{text:"алфавит",weight:7},
{text:"единица",weight:7},{text:"буквы",weight:6},
{text:"количество",weight:6},{text:"французский",weight:6},
{text:"формула",weight:6},{text:"реферат",weight:6},
{text:"кода",weight:6},{text:"прописные",weight:5},
{text:"называется",weight:5},{text:"а4",weight:5},
{text:"лайфхак",weight:5},{text:"тегов",weight:5},
{text:"проверка",weight:5},{text:"excel",weight:5},
{text:"отмазок",weight:4},{text:"новости",weight:4},
{text:"каково",weight:4},{text:"генератор",weight:4},
{text:"ссылки",weight:4},{text:"тетрадный",weight:4},
{text:"зебру",weight:4},{text:"важно",weight:4},
{text:"титулка",weight:4},{text:"титульна",weight:4},
{text:"языков",weight:4},{text:"день",weight:3},
{text:"цифры",weight:3},{text:"транслитерация",weight:3},
{text:"числа",weight:3},{text:"сторінка",weight:3},
{text:"сейчас",weight:3},{text:"отличается",weight:3},
{text:"диаграмму",weight:3},{text:"украине",weight:3},
{text:"русском",weight:3},{text:"время",weight:3},
{text:"фейковые",weight:3},{text:"расчет",weight:2},
{text:"стран",weight:2},{text:"рейтинг",weight:2},
{text:"линейку",weight:2},{text:"фамилий",weight:2},
{text:"создание",weight:2},{text:"означает",weight:2},
{text:"чистописания",weight:2},{text:"формата",weight:2},
{text:"специалиста",weight:2},{text:"простой",weight:2},
{text:"валюта",weight:2},{text:"разных",weight:2},
{text:"ворде",weight:2},{text:"сайт",weight:2},
{text:"вычислить",weight:2},{text:"открыть",weight:2},
{text:"википедия",weight:2},{text:"распечатать",weight:2},
{text:"гребаный",weight:2},{text:"миллиметровка",weight:2},
{text:"сделать",weight:2},{text:"сообщении",weight:2},
{text:"трудночитаемый",weight:2},{text:"клетка",weight:2},
{text:"письма",weight:2});
 $(document).ready(function() {
 $("#wordcloud").jQCloud(word_list, {autoResize: true})
 });
</script>
И в завершение - контейнер, в котором будет отрисовано облако:
<div id="wordcloud"></div>

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]